この記事は主に、vue-cli + sass を開くための正しい方法を写真とテキストの形で紹介します。これは非常に優れており、必要な友人が参考になれば幸いです。 vue-cli で構築されたプロジェクトで Sass を設定する方法について、インターネット上で見つかった答えは基本的には次のとおりです: しかし、 にスタイルを直接記述する方が良いと思います。これは非常に賢明ではないアプローチです。 node-sass のインストールプロセスにはさまざまな落とし穴があることは言うまでもなく、埋め込まれた <style> もコンポーネントを非常に混乱させます。特定のメソッドを変更するときに、数十行または数百行の CSS コード内でスクロール ホイールをドラッグする必要がある場合、またはスタイルのセットを変更したいが、対応する CSS ファイルが Vue ファイル内に散在しているために見つからない場合を想像してください。 。 。 。 </p> <p>私の意見では、sass ファイルを個別に管理し、コンパイルされた css ファイルを main.js に直接導入するのが正しいアプローチであると考えています。 iView と同様、ElementUI はすべてこのアプローチを採用しています。 </p> <p>このアプローチに同意し、採用する予定がある場合は、次の具体的な例をご覧ください: </p> <p><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/9229cd66df0d99d4d5886eaff8fbe919-1.png"></p> <p> プロジェクト構造は上に示したとおりで、管理と後のメンテナンスを容易にするために、style フォルダーの下に分類された scss ファイルが配置されます。次に、すべての scss スタイル フラグメントを main.scss に導入し、sass --watch main.scss:main.css コマンドを使用して監視し、scss ファイルを css ファイルにコンパイルします。最後に、main.css ファイルを main.js に導入します。このようにして、クラスを要素に直接追加し、scss でスタイルを記述することができます。 </p> <p><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/9229cd66df0d99d4d5886eaff8fbe919-2.png"></p> <p> もちろん、これらのコマンドを毎回手動で入力する必要はありません。最初のアイデアは dev コマンドを変更することです: <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-3.png"></p> <p> しかし、これは前のコマンドのみであるため、効果は得られません。毎回開始されます。そこで、バッチ処理を使用して実装することを検討しました: <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-4.png"><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-5.png"></p> <p> これら 2 つの .bat をルート ディレクトリに配置し、package.json を構成します: <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-6.png"></p> <p> このようにして、npm run を使用できます。ワンクリックで開発 ホットリロードと Sass watch を開始します。 </p> <p>関連する推奨事項: </p> <p><a href="http://www.php.cn/css-tutorial-384832.html" target="_self">CSSプリプロセッサSassのサンプルの詳細な説明</a></p> <p><a href="http://www.php.cn/js-tutorial-379524.html" target="_self">Webstrom Sassコメントの中国語エラー問題を解決する方法</a></p> <p><a href="http://www.php.cn/css-tutorial-358063.html" target="_self">SASSについての学習のまとめ</a></p>