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 を応援していただければ幸いです。