能否修改已导出的module.exports属性值并实现全局样式生效？

完全可以实现。核心逻辑是CommonJS/ES Module导出的普通对象是内存引用，而非值拷贝，只要匹配不同引用场景的取值时机做调整，就能实现全局配置修改后的同步生效。

不同引用场景的实现方式 #

1. 运行时JS组件内的动态引用 #

你当前导出的CommonJS对象，所有通过require()/import导入该模块的代码，拿到的都是同一个内存地址的对象引用。只要你在触发业务事件时，直接修改对象上的对应属性，所有后续读取该属性值的JS逻辑，都会拿到最新值。

比如触发主题切换的业务事件时，直接执行修改逻辑即可：

import colors from './Colors.js'
// 业务事件触发时执行
function updateGlobalColorConfig(newPrimary, newBtnBg) {
  // 直接修改导出对象的属性
  colors.main.primaryColor = newPrimary
  colors.buttons.backGround = newBtnBg
  // 配合触发对应UI层的重渲染逻辑，即可让所有组件读取到最新色值
}

2. SCSS编译链路下的动态引用 #

SCSS是构建期静态编译的，你在JS运行时修改的对象属性值，无法回溯到已经执行完的构建流程里——如果你之前是通过sass-loader把JS模块的变量直接传给SCSS做编译，本质是构建阶段就把色值替换成静态文本写进CSS文件，运行时的JS修改完全不会影响已经生成的静态样式。

要打通这个场景的动态更新，需要把色值的传递逻辑从“构建期静态传值”换成“运行时CSS自定义变量”：

• 第一步：修改Colors.js的属性值，绑定对应的CSS变量

module.exports = {
  main: {
    primaryColor: 'var(--global-primary)',
  },
  buttons: {
    backGround: 'var(--global-btn-bg)',
  },
}

• 第二步：业务事件触发更新时，同步修改CSS全局变量的值

function updateGlobalColorConfig(newPrimary, newBtnBg) {
  // 更新JS对象属性，兼容纯JS组件的引用逻辑
  colors.main.primaryColor = newPrimary
  colors.buttons.backGround = newBtnBg
  // 更新根节点的CSS变量，所有引用该变量的SCSS编译产物会自动同步更新
  document.documentElement.style.setProperty('--global-primary', newPrimary)
  document.documentElement.style.setProperty('--global-btn-bg', newBtnBg)
}

• 第三步：调整SCSS的引用逻辑，把原来写死的色值替换成对应CSS变量的引用，因为CSS变量是运行时动态解析的，全局变量值修改后，所有关联的样式会自动生效。

常见注意事项 #

• 禁止解构取值的坑：导入模块后直接通过const { primaryColor } = require('./Colors')解构出来的属性是静态值拷贝，后续修改原对象属性不会同步到这个常量，所有引用场景都要保持“拿到整个对象引用、运行时动态读取属性”的逻辑。
• 对象冻结的坑：如果曾经对导出配置对象做过Object.freeze()冻结，属性会变为只读，无法直接修改赋值，需要移除冻结逻辑。
• 导出语法的坑：如果使用ES Module语法导出对象，和CommonJS的逻辑一致：导出的对象是引用类型，修改对象属性是全局生效的；但如果导出的是基础类型常量（比如export const primary = 'red'），是无法在外部重新赋值修改的。

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