Vue全局自动导入SCSS变量文件失效问题求助

核心问题：sass-loader版本不匹配配置项 #

你用的sass-loader是7.3.1版本，这个版本的全局注入配置字段不是additionalData，而是data。additionalData是sass-loader 8.x及以上版本才启用的新字段，7.x版本仍沿用旧的data配置。

修复步骤 #

• 修改vue.config.js配置，替换字段名：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 把additionalData改成data
        data: `@import "@/styles/variables.scss";`
      }
    }
  }
}

注意：@对应项目src目录，要根据你实际的variables.scss路径调整，比如文件在src/assets/css下就改成@/assets/css/variables.scss

• 验证路径正确性
  如果改完配置还是无效，先尝试用绝对路径测试，排除路径问题：

data: `@import "${__dirname}/src/styles/variables.scss";`

生效后再换回别名路径。

• 清除缓存重启服务
  修改配置后必须关闭开发服务，重启项目，避免缓存导致配置不生效。

额外排查点 #

• 版本兼容性：sass@1.69.5属于较新版本，和sass-loader 7.3.1可能存在兼容问题，若上述操作无效，可以尝试降级sass到1.32.x版本，适配7.x系列的sass-loader。
• 变量文件语法：检查variables.scss里的变量定义是否正确，比如$dark-bg: #222;，确保没有遗漏分号或语法错误。

内容的提问来源于stack exchange，提问作者Elizaveta