vue项目中设置全局引入有变量的scss供组件引用

1、 安装node-sass、sass-loader、style-loader
    npm install node-sass --save-dev
    npm install sass-loader --save-dev
    npm install style-loader --save-dev
2、安装sass-resources-loader （如果不安装的话变量会报错）
   npm install sass-resources-loader --save-dev
3、修改build中的utils.js
scss: generateLoaders('sass'),
    修改成:
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/main.scss') //这里写自己的文件路径
        }
      }
    )
4、在main.js里面引入即可
import './assets/main.scss'
5、如果＜style lang=“scss“＞报错TypeError: this.getOptions is not a function at Object.loader

image.png

node-sass和sass-loader的版本冲突问题，重新卸载安装

npm uninstall sass-loader node-sass     
npm install sass-loader@7.3.0 --save-dev
npm install node-sass@4.14.1 --save-dev
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容