vue scss 使用 及 踩坑

原文地址:https://www.cnblogs.com/xulei1992/p/12101068.html

1.安装

npm install sass-loader node-sass vue-style-loader --save

若运行时报错：

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，找到package.json文件，将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

或者卸载当前版本，然后安装指定的版本

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

2.build/webpack.base.conf.js,在rules中添加scss规则

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

3.在vue文件中添加

<style lang='scss'>
</style>

必须添加，无论是引入文件还是页面里写，若引入文件未写则不会生效。

4.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

5.修改build中的utils.js

将

scss: generateLoaders('sass')

修改为：

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