WeChatアプレットを少なく使う方法(最適な方法)

WeChatアプレットを少なく使う方法(最適な方法)

序文

私は less/sass を書くことに慣れていますが、小さなプログラムを開発するときには、まだ css が足りず、慣れていません。

私がオンラインで検索したチュートリアルは、gulp または vscode 用の Easy-less プラグインに関するものでした。

伝統的な方法

これら 2 つの方法の長所と短所を比較してみましょう。

ゴクリ

前者はgulpの基本的な理解が必要ですが、現在人気のwebpackではgulpを使用する人が減っており、一定の学習コストがかかりますが、幸いなことにカスタマイズ性が高く、自由にtakeを追加できます。

VScodd による Esay-less プラグイン

何も言わずとも、かなり良いです。vscodeにeasy-lessプラグインをインストールし、.jsonを設定するだけで、lessを楽しく使用できます。保存すると、同じディレクトリに.wxssファイルを生成できます。欠点は、vscodeで使用する必要があることです。つまり、開発中に2つのエディターを開く必要があります。1つはvscodeでlessを書くため、もう1つはWeChat開発者ツールを使用してプレビューするためです...うーん、想像できないほど美しい写真です

新たなアプローチ

たまたまインターネットで「ミニプログラムで less を使いたいですか? (VScode 版)」のスクリーンショットを見ました。

WeChat 開発ツールで直接使用できる Easy-less は、vscode で使用されているものと同じ機能を備えています。あまりに驚いたので、公式ドキュメントを確認したところ、WeChat 開発ツールはバージョン 1.03.2004271 から拡張ツールのサポートを開始していたことがわかりました。

そして、vscodeの拡張機能を使用するだけで、非常に便利です

一連の操作を経て、それが可能であることが証明されました。

ステップ

1. VscodeにEasy-lessをインストールする

2. 拡張フォルダ

解凍されたフォルダは、~/.vscode/extensions (macOS システム) または C:\Users\username.vscode\extensions (Microsoft Windows システム) にあります。

mrcrowl.easy-less-1.6.3ファイルをWeChat開発者ツールにコピーします。

3. 拡張機能フォルダを貼り付ける

WeChat開発者ツールを開き、トップバーから設定 > 拡張機能設定 > 拡張機能 > カスタム拡張機能を選択します。

「拡張フォルダを開く」をクリックするとフォルダが開くので、ここに貼り付けます。


4. output.wxssを設定する

残っているのは最後のステップだけです。Easy-less はデフォルトで CSS を出力しますが、アプレットは .wxss ファイルを使用する必要があるため、出力ファイルのサフィックスを設定するだけです。

5. WeChat開発者ツールを再起動する

設定が成功したら、アプレットを閉じて再度開き、pages ディレクトリでページを見つけて新しい index.less を作成し、CSS を記述して保存し、index.wxss に変更があるかどうかを確認します...

最終結果

参照:

  • 公式ドキュメント - エディター拡張機能
  • vscode 簡単レス
  • ミニプログラムで less を使いたいですか? (VScode バージョン)
  • 中国語のウェブサイトが少ない

要約する

WeChat ミニプログラムで Less を使用する方法 (最良の方法) に関するこの記事はこれで終わりです。WeChat ミニプログラムで Less を使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレット レス ファイルを wxss ファイルにコンパイルする方法
  • WeChat ミニプログラムで WebStorm と LESS を使用する

<<:  Linux ディスクのマウント、パーティション分割、容量拡張操作を実装する方法

>>:  CentOS7でFTPサーバーを設定する方法

推薦する

JSはじゃんけんゲームを実装します

この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...

DockerでJavaプログラムを起動する方法

シンプルなSpring Boot Webプロジェクトを作成するアイデア ツールを使用して、Sprin...

Linux ログ表示方法 6 つのまとめ

バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

CSS3で実装された6つの境界遷移効果

6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...

MySQLでconcat関数を使用する方法

以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...

DOCTYPE 文書型宣言 (Web ページ愛好家必読)

DOCTYPE 宣言 作成するすべてのページの先頭に、ドキュメント宣言が必要です。はい、そうでしょう...

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタンhistory.back() を使用してブラウザの「戻る」ボタンを作成します。 &l...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...