如何让scss变量作为js变量使用目前我们在使用scss变量时有两个痛点：需要手动导入，与js难以建立联系，而后续不能基于此解决这两个问题，我们创建一个js文件定义json格式的scss变量，然后配置webpack的解析规则，达到像普通scss一样使用的目的，作为js变量。scss变量使用规范变量创建所有scss变量都写在style/variables.scss.js中，格式要求是：单词之间只允许使用小写字母，下划线“_”连接名字要简洁易懂理解，基于一个大模块或者高层_开头的后面跟在单词结尾的功能描述constvariables={'header_height':'60px','header_background':`#ededed`}module.exports=变量；注意：命名下划线连接是为了能够在js文件中单独导入，使用时已经在webpack中进行了转换，必须遵循这种格式！它是一个普通的scss变量，在scss变量中使用：$header-height在js中用于定义变量格式：import{header_height}from"@/style/variables.scss.js";变量在配置webpack中使用sass解析一般情况下项目构建者已经处理好了，项目成员不需要关心。使用时无需介绍，直接在样式文件中即可正常使用。scss.the-nav中的使用示例{height:$header-height;}js中的使用示例:header_height}}...配置说明cuecli3+letinvue.config.jsscssVariables=require('./src/style/variables.scss.js');module.exports={css:{loaderOptions:{sass:{prependData:Object.keys(scssVariables).map(k=>`\$${k.replace('_','-')}:${scssVariables[k]};`).join('\n')}}}};注意：这里有一个陷阱。新版sass-loader替换了api参数prependData，但是好像没有文档说明cuecli3+letscssVariables=require('./src/style/variables.scss.js');module.exports={css:{loaderOptions:{sass:{data:Object.keys(scssVariables).map(k=>`\$${k.replace('_','-')}:${scssVariables[k]};`).join('\n')}}}};旧版本数据=>新版本prependDatawebpack.config.jsvuecli2letscssVariables=require('./src/style/variables.scss.js');...{test:/\.scss$/,使用:['css-loader','postcss-loader',{loader:'sass-loader',options:{data:Object.keys(scssVariables).map(k=>`\$${k.replace('_','-')}:${scssVariables[k]};`).join('\n')}}]}...经过一些手势，给你到这里就可以成功解锁新世界了~~~~用优雅的姿势脱毛~呵呵，没代码~GitHub欢迎交友
