VUE-CLI配置全局SCSS变量

一.引入node-sass和sass-loader依赖

npm install --save-dev sass-loader node-sass

二. 在项目根目录中创建一个scss变量文件，比如constant.scss：

三.在vue.config.js文件中引入这个变量文件：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/utils/css/constant.scss";`
      }
    }
  }
};

四.版本错误的配置
 

sass-loader版本问题引发的错误：options has an unknown property 'prependData'. These properties are valid

当前版本如下:

"sass": "^1.32.7",
"sass-loader": "^12.0.0",

原来的写法：

css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/utils/css/constant.scss";'
      }
    }
}

修改后（生效）：

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      
      sass: {
        additionalData: '@import "@/utils/css/constant.scss";'
      }
    },
  }
})

 多个文件全局配置

css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/style/utils/_variables.scss";
        @import "@/style/utils/mixin.scss";
        `
      }
    }
}