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

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

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

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

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

npm install node-sass sass-loader --save-dev

2. build で webpack.base.conf.js を見つけ、scssrules を rules

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

に追加します。 3. vue ファイルで

<style>
</style>

を使用して、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 選

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

プログラミング入門

! ！

以上が.vue ファイルに scss を記述するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。