Vue项目如何在vue.config中配置sass-loader的prependData参数？

别担心，你不用手动去调整vue inspect输出里的每一个sass-loader实例——Vue CLI提供了更优雅的方式来统一配置所有预处理器加载器的选项，完全不需要碰底层的webpack规则细节。

最简单的解决方案：使用css.loaderOptions #

在项目根目录创建或修改vue.config.js，添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `$alert: ${process.env.ALERT_COLOR};`
      }
    }
  }
}

这个配置会自动将prependData注入到所有sass-loader实例中——不管是处理vue模块样式、普通模块样式还是全局样式的加载器，都会应用这个变量注入规则。完美解决了你不知道改哪个实例的问题。

（可选）针对特定规则修改（不推荐，除非特殊需求） #

如果你确实需要只针对某一类样式规则修改（比如你提到的vue-modules），可以通过chainWebpack来链式修改webpack配置：

module.exports = {
  chainWebpack: config => {
    // 定位到scss规则下的vue-modules分支
    config.module
      .rule('scss')
      .oneOf('vue-modules')
      .use('sass-loader')
      .tap(options => {
        // 扩展原有配置，添加prependData
        options.prependData = `$alert: ${process.env.ALERT_COLOR};`
        return options
      })
  }
}

不过这种方法只修改单个实例，大部分场景下第一种全局配置的方式更实用。

配置完成后，重启你的开发服务器，你的.some-class里的$alert变量就会自动获取环境变量ALERT_COLOR的值了。

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