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 [email protected] --save-dev
npm install [email protected] --save-dev