如何解决SCSS变量在JavaScript中无法读取的问题_通过CSS Modules的:export-css教程-PHP中文网

scss变量无法在js中直接读取，因其仅存在于编译阶段，必须通过.module.scss文件配合:export块导出（如primary: #{$primary-color};），漏掉.module.命名或未插值均导致undefined。

如何解决scss变量在javascript中无法读取的问题_通过css modules的:export

SCSS变量在JS中读不到，不是你写错了，而是它根本没被设计成“运行时可访问”——必须走:export + .module.scss这条路，漏掉任一环节都会返回undefined。

为什么`import vars from './variables.scss'`总是`undefined`

因为.scss后缀不触发CSS Modules机制，Webpack/Vite会把它当普通样式文件处理：只注入CSS，不生成导出对象。即使文件里写了:export，也完全被忽略。

必须把文件重命名为variables.module.scss（注意.module.是固定关键字，不能写成.modules或module-variables.scss）
import语句里的路径也要同步改成./variables.module.scss
Vue单文件组件中，<style lang="scss"></style>块内@import仍可用.scss，但JS里想读值，只认.module.scss

`:export`块的写法和限制

:export不是CSS规则，是CSS Modules的特殊语法，只在.module.scss中生效，且导出值会被强制转为字符串。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

变量必须用#{$var}插值，不能直接写$var：primary: #{$primary-color}; ✔️，primary: $primary-color; ❌（后者导出的是字面字符串"$primary-color"）
不支持表达式、函数调用或嵌套计算：padding: #{$spacing-sm * 2}; 会编译失败
多个:export块会被合并，同名key后声明的覆盖前声明的，无警告
导出的值始终是字符串，哪怕原SCSS变量是数字：gap: #{$gap-sm}; → styles.gap === "0.5rem"

Vue项目中`data()`里取不到`variables.xxx`的常见原因

即使文件名和:export都对了，Vue组件里仍可能拿到undefined，问题往往出在模块解析链上。

确保import variables from '@/style/variables.module.scss'路径正确，且@/别名已配置（Vite中需检查resolve.alias，Vue CLI中看vue.config.js）
不要在<script setup></script>中用import后直接解构：const { primary } = variables可能因TS类型推导失败而丢失值；建议保留variables.primary访问
如果使用defineProps或defineEmits的组合式API，确认import语句不在<script setup></script>作用域外被误删
Vue 2项目需确认vue-loader版本 ≥15.9，旧版对.module.scss支持不完整

比`:export`更通用的方案：CSS自定义属性

当需要JS动态读写、主题切换或跨框架共享设计值时，:export就力不从心了——它是一次性静态导出，无法响应变化。

在:root里用插值绑定SCSS变量：:root { --primary: #{$primary-color}; --gap: #{$gap-sm}; }
JS中读取：getComputedStyle(document.documentElement).getPropertyValue('--primary')（注意返回值带空格，要用.trim()）
JS中修改：document.documentElement.style.setProperty('--primary', '#e74c3c')，所有用var(--primary)的地方自动更新
兼容性注意：IE全系不支持，Node环境（如JSDOM）需额外mock，移动端Safari 13.4+才稳定响应变更

真正容易被忽略的点是：SCSS变量本身没有“生命周期”，它要么在编译期被蒸干，要么靠:export或--custom-property桥接进JS。选哪条路，取决于你是否需要运行时动态性——要动态，就绕不开CSS自定义属性；只要静态常量，.module.scss + :export足够，但文件名和插值一个都不能错。