Vue项目中.scss文件无法使用additionalData，如何配置环境变量？

核心问题是你当前的additionalData配置仅作用于.vue文件内的SCSS代码块，未覆盖独立.scss文件。通过调整Vue CLI的loader配置即可解决：

• 项目根目录新建/修改vue.config.js，配置SCSS loader的additionalData，让它对所有SCSS文件生效：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 该代码会注入到所有SCSS文件的开头
        additionalData: `$test: "${process.env.VUE_APP_TEST_COLOR}";`
      }
    }
  }
}

• 确保环境变量以VUE_APP_开头（Vue CLI会自动注入这类变量到process.env），比如在.env文件中定义：

VUE_APP_TEST_COLOR=#ff0000

• 重启开发服务（npm run serve），此时独立的src/style.scss就能正常使用$test变量。

原理：Vue CLI的css.loaderOptions.scss.additionalData会把指定SCSS代码注入到所有被sass-loader处理的文件开头，包括独立.scss文件和.vue文件内的<style scss>块，实现环境变量转SCSS变量的全局共享。

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