如何在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')
  }
})