如何在vue項目中使用scss？scss-loader使用 style lang=scss

webpack3和webpack4對應的sass-loader的版本是不同的，不能混用。
之前出現這樣一個問題，webpack3上使用[email protected]，解析時出現錯誤：this.getResolve is not a function

webpack3 對應[email protected]版本，我這裏使用7的最後一個版本7.3.1
webpack4 對應[email protected]版本，當前8最新版本爲8.0.2

sass-loader Github地址

一、在Vue組件中使用scss

1.安裝sass-loader node-sass
此處指定安裝 sass-loader@7

npm i -D sass-loader@7 node-sass

2.修改webpack配置
修改文件build/webpack.base.conf.js

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

3.組件中使用

<style lang='scss'>
.title {
	color: #000;
}
</style>

二、全局引入.scss樣式文件

1.安裝sass-resources-loader

npm i -D sass-resources-loader

2.修改配置
將build/utils.js文件中的：

scss: generateLoaders('sass')

修改爲：

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
      // 此處爲需要引用的scss全局文件的路徑
    resources: path.resolve(__dirname, '../src/style/index.scss')
  }
})