scss全局变量引入异常

在main,js中已经引入index.scss，但是在全局的index中定义的全局变量在界面中还是引入失败，报错

在index中定义$--primary-color:#ffffff

在vue.config.js中的css中加上

        additionalData: `@import "~@/assets/styles/constant.scss";`
     

  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" },
        additionalData: `@import "~@/assets/styles/constant.scss";`
      },
      scss: {
        additionalData: `@import "~@/assets/styles/constant.scss";`
      },
    }
  },

主要的是sass，

因为 `scss` 语法在内部也是由 sass-loader 处理的

 sass-loader v8 这个选项名是 “prependData”

如果以上方法不行，那就试试接下来一个大佬推荐的这个方式：

1、安装sass-resources-loader

npm i sass-resources-loader --save-dev

2、修改build/utils.js文件，修改scss的加载设置

 return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass').concat({
         loader: 'sass-resources-loader',
         options: {
             resources: path.resolve(__dirname, '../src/assets/styles/constant.scss')//scss文件地址
          }
     }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
  }