vue-cli と sass を開く方法の詳細な図による説明

この記事は主に、vue-cli + sass を開くための正しい方法を写真とテキストの形で紹介します。これは非常に優れており、必要な友人が参考になれば幸いです。

vue-cli で構築されたプロジェクトで Sass を設定する方法について、インターネット上で見つかった答えは基本的には次のとおりです:

しかし、 にスタイルを直接記述する方が良いと思います。これは非常に賢明ではないアプローチです。 node-sass のインストールプロセスにはさまざまな落とし穴があることは言うまでもなく、埋め込まれた もコンポーネントを非常に混乱させます。特定のメソッドを変更するときに、数十行または数百行の CSS コード内でスクロール ホイールをドラッグする必要がある場合、またはスタイルのセットを変更したいが、対応する CSS ファイルが Vue ファイル内に散在しているために見つからない場合を想像してください。 。 。 。

私の意見では、sass ファイルを個別に管理し、コンパイルされた css ファイルを main.js に直接導入するのが正しいアプローチであると考えています。 iView と同様、ElementUI はすべてこのアプローチを採用しています。

このアプローチに同意し、採用する予定がある場合は、次の具体的な例をご覧ください:

プロジェクト構造は上に示したとおりで、管理と後のメンテナンスを容易にするために、style フォルダーの下に分類された scss ファイルが配置されます。次に、すべての scss スタイル フラグメントを main.scss に導入し、sass --watch main.scss:main.css コマンドを使用して監視し、scss ファイルを css ファイルにコンパイルします。最後に、main.css ファイルを main.js に導入します。このようにして、クラスを要素に直接追加し、scss でスタイルを記述することができます。

もちろん、これらのコマンドを毎回手動で入力する必要はありません。最初のアイデアは dev コマンドを変更することです:

しかし、これは前のコマンドのみであるため、効果は得られません。毎回開始されます。そこで、バッチ処理を使用して実装することを検討しました:

これら 2 つの .bat をルート ディレクトリに配置し、package.json を構成します:

このようにして、npm run を使用できます。ワンクリックで開発 ホットリロードと Sass watch を開始します。