vue-cli+sassの使い方を詳しく解説

今回は、vue-cli+sass の使い方と、vue-cli+sass を使用する際の注意点について詳しく説明します。以下は実際の事例ですので、見てみましょう。

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

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

スタイル フォルダーには、管理と後のメンテナンスを容易にするために分類された scss ファイルが含まれています。次に、すべての scss スタイル フラグメントを main.scss に導入し、次を使用します。 sass --watch main.scss:main.css このコマンドは、scss ファイルをリッスンして css ファイルにコンパイルします。最後に、main.css ファイルを main.js に導入します。このようにして、クラスを要素に直接追加し、scss でスタイルを記述することができます。

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

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

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Date オブジェクトのカウントダウン関数を作成する方法

vue での v-model の動的使用の詳細な説明