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 を開始します。