vue.config.js中scss prependData无法传递JS对象变量问题

• scss-loader的prependData参数不支持传入对象类型，它仅接受字符串格式的合法SCSS代码，作用是在编译阶段将传入的字符串前置拼接到所有SCSS文件的头部。传入对象会被默认转成[object Object]格式的无效SCSS代码，直接触发编译报错，和你遇到的报错表现一致。
• 额外注意：你想实现API返回动态配色的需求，本身就不能通过vue.config.js的构建配置完成——构建配置是项目打包阶段执行的，API请求是用户访问页面、项目运行时才触发的，构建阶段根本拿不到接口返回的动态值，你之前env变量能生效是因为env值在构建时就可以被读取，属于静态构建时变量，和运行时API返回值的生效时机完全不同。

方案1：静态变量场景（构建时可拿到值，比如env变量） #

如果你只是觉得手写长串SCSS变量字符串维护麻烦，可以先把变量写成对象格式，自己在配置里转成符合要求的字符串再传给prependData，不要直接传对象：

// vue.config.js
const scssVarMap = {
  '$VUE_APP_PRIMARY': process.env.VUE_APP_PRIMARY,
  '$VUE_APP_FOOTER_PRIMARY_COLOR': process.env.VUE_APP_FOOTER_PRIMARY_COLOR,
  '$VUE_APP_NAV_COLOR': process.env.VUE_APP_NAV_COLOR,
  '$VUE_APP_CARD_BANDAGE_COLOR': process.env.VUE_APP_CARD_BANDAGE_COLOR,
  '$VUE_APP_TOP_HEADER_COLOR': process.env.VUE_APP_TOP_HEADER_COLOR,
  '$VUE_APP_TOP_HEADER_FONT_COLOR': process.env.VUE_APP_TOP_HEADER_FONT_COLOR,
  '$VUE_APP_NAV_PRIMARY_COLOR': process.env.VUE_APP_NAV_PRIMARY_COLOR,
  '$VUE_APP_DARK_BTN': process.env.VUE_APP_DARK_BTN,
  '$VUE_APP_DARK_BTN_COLOR': process.env.VUE_APP_DARK_BTN_COLOR,
  '$VUE_APP_BRAND_BTN': process.env.VUE_APP_BRAND_BTN,
  '$VUE_APP_BRAND_BTN_COLOR': process.env.VUE_APP_BRAND_BTN_COLOR,
  '$VUE_APP_ERROR_MESSAGE_COLOR': process.env.VUE_APP_ERROR_MESSAGE_COLOR,
  '$VUE_APP_FONT_FAMILY': process.env.VUE_APP_FONT_FAMILY,
  '$VUE_APP_FONT_HEADER': process.env.VUE_APP_FONT_HEADER,
  '$VUE_APP_BACKGROUND': process.env.VUE_APP_BACKGROUND,
  '$VUE_APP_BACKGROUND_IMAGE': process.env.VUE_APP_BACKGROUND_IMAGE,
  '$VUE_APP_CHOOSE_CATEGORY': process.env.VUE_APP_CHOOSE_CATEGORY,
  '$VUE_APP_PLACEHOLDER': process.env.VUE_APP_PLACEHOLDER,
  '$VUE_APP_BTN': process.env.VUE_APP_BTN,
  '$VUE_APP_FOOTER_LINK': process.env.VUE_APP_FOOTER_LINK,
  '$VUE_APP_MULTIPLE_TAG': process.env.VUE_APP_MULTIPLE_TAG,
  '$VUE_APP_CART_BTN_BACKGROUND': process.env.VUE_APP_CART_BTN_BACKGROUND,
  '$VUE_APP_CART_BTN': process.env.VUE_APP_CART_BTN,
  '$VUE_APP_ORDER_INFO_CARD': process.env.VUE_APP_ORDER_INFO_CARD,
  '$VUE_APP_CARD_BTN_DELETE_BACKGROUND': process.env.VUE_APP_CARD_BTN_DELETE_BACKGROUND,
  '$VUE_APP_CARD_BTN_DELETE': process.env.VUE_APP_CARD_BTN_DELETE,
  '$VUE_APP_CARD_BTN_HOVER': process.env.VUE_APP_CARD_BTN_HOVER
}
// 把对象转成prependData要求的SCSS字符串格式
const prependDataStr = Object.entries(scssVarMap)
  .map(([varName, varValue]) => `${varName}:${varValue};`)
  .join('\n')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: prependDataStr
      }
    }
  }
}

方案2：动态API配色场景（运行时拿到值） #

SCSS变量是编译时变量，打包后就会被转成固定的CSS值，无法在运行时修改，实现动态换肤必须用CSS自定义属性（CSS变量），流程如下：

1. 项目入口处请求API拿到配色对象
2. 将配色值逐个挂载到页面根节点的行内样式上，作为全局CSS变量
3. 样式文件中直接通过var()函数读取对应CSS变量即可

示例代码：

// 接口请求逻辑，拿到配色后执行
async function initTheme() {
  const themeConfig = await fetch('/api/get-theme-config').then(res => res.json())
  const rootEl = document.documentElement
  // 遍历配色对象，批量挂载CSS变量
  Object.entries(themeConfig).forEach(([colorKey, colorValue]) => {
    rootEl.style.setProperty(`--theme-${colorKey}`, colorValue)
  })
}
initTheme()

样式中使用：

.page-footer {
  background: var(--theme-footer-primary-color);
}
.nav-bar {
  color: var(--theme-nav-color);
}

这种方案不需要修改构建配置，接口返回新的配色时只需要重新执行一遍变量挂载逻辑，就能实时更新全站配色，支持无刷新换肤。

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