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サーバーを設定する方法

推薦する

フレックスとポジションの互換性の詳細な説明マイニングノート

今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ...

MySQL インデックスに関するヒントのまとめ

目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

MLSQL スタックでストリームのデバッグを簡単にする方法

序文クラスメートが MLSQL Stack のストリーミング サポートを調査しています。そこで、フロ...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

SNMP4J サーバー接続タイムアウト問題の解決策

弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...

Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法

Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

Docker-compose インストール db2 データベース操作

db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...

MySQL における冗長インデックスと重複インデックスの違い

MySQL では、1 つの列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、M...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

JS で列挙をシミュレートする方法

序文現在の JavaScript には列挙の概念がありません。一部のシナリオでは、列挙を使用するとデ...

MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策

1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...