vueでsassを設定する

今回は、Vue で Sass を設定する方法について説明します。Vue で Sass を設定する際の注意点について、実際の事例を見てみましょう。

1. webpack テンプレートに基づいて新しいプロジェクトを作成します

$ vue init webpack myvue

2. 現在のディレクトリに依存関係をインストールします

$ cd myvue
$ npm install

3. ビルドフォルダー webpack.base に Sass 依存関係パッケージをインストールします。 conf 以下に示すように .js のルールに設定

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

を追加します。

5. APP.vue の style タグを変更します

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'scss']
}

6. 次に、APP のスタイルを変更します。 .vue、効果が見えますか

8. 実行結果の背景が灰色になり、sass が正常に設定されたことを示していますか

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

推奨読書:

プロジェクトで PHP 静的バインディングを使用する方法

vue-router で渡すクエリの動的パラメーターを処理する方法

以上がvueでsassを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。