.vue ファイルに scss を記述するにはどうすればよいですか?

方法: まず [node-sass および sass-loader] 依存関係をインストールし、次に [webpack.base.conf.js] ファイルを開いてルールに scss ルールを追加し、最後に [ ] に scss ルールを追加します。 】タグ内にscssスタイルを記述します。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

#vue プロジェクトでの scss の使用

1. 最初に依存関係をインストールします

npm install node-sass sass-loader --save-dev 2. build で webpack.base.conf.js を見つけ、 scss rules を rules

{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] } に追加します。 3. vue ファイルで を使用して、vue プロジェクトに scss をグローバルに導入します

1. グローバル参照 sass-resources-loader

npm install sass-resources-loader --save-dev 2 をインストールする必要があります。 build の utils.js ## を変更します。

# scss: generateLoaders('sass') を

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } )

に変更します。 関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要(回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識をさらに深めてください。訪問: プログラミング入門 ! ！