#app{height:500px;}@import"./styles/css-use.css";原博文地址，此博文首发于csdn，原站前段时间遇到网站换肤的需求，本以为会很简单，直接使用Sass或Less设置变量即可，结果就是在js中设置的问题样式要单独设置，很麻烦。本文代码gitHub地址为https://github.com/l-x-f/variables-css-less-sass-js这时候如果style文件和js文件可以共享变量，那么这个问题就迎刃而解了。查了很多资料，最终的解决方案如下：1、原理介绍：通过webpack和css模块，我们可以在js中使用styleSass、Less、Css文件中定义的变量。2.环境：node:v8.10.0vue-cli:3.5.33.package.json（先安装scss和less及其loader，vue-cli:3.5.3下已经配置好webpack）{"name":"Javascript如何在Sass、Less和Css之间共享变量","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"},"dependencies":{"core-js":"^2.6.5","vue":"^2.6.6","vue-router":"^3.0.1","vuex":"^3.0.1"},"devDependencies":{"@vue/cli-plugin-babel":"^3.5.0","@vue/cli-plugin-eslint":"^3.5.0","@vue/cli-service":"^3.5.0","babel-eslint":"^10.0.1",“eslint”：“^5.8.0”，“eslint-plugin-vue”：“^5.0.0”，“less”：“^3.9.0”，“less-loader”：“^4.1.0”，"node-sass":"^4.9.0","sass-loader":"^7.1.0","vue-template-compiler":"^2.5.21"}}4.文件目录下5.variables文件夹代码（核心代码）css.css文件/*@value定义变量，然后使用它们。@valuebgcColor：红色；会导出@后面的变量，可以在:export{}中获取，也可以导出，在功能上等同于ES6的关键字export，即导出一个js对象。*/@valuebgcColor:red;@valuefontSize:10px;/*这里可以直接使用.demo{background-color:bgcColor;字体大小：字体大小；}*//*CSS模块导出：导出{cssExportBgcColor：bgcColor；}*/less.lessfile@mainColor:#398bd0;@fontSize:100px;//CSSModule有一个:export关键字，在功能上等同于ES6关键字export，即导出一个js对象。：出口{名称：“少”;主色：@mainColor；fontSize:@fontSize;}scss.scssfile$primaryColor:#f4d020;$fontSize:11px;//CSSModule有一个:export关键字，作用是相当于ES6的关键字export，即导出一个js对象。:export{名称:"scss";原色：$原色；fontSize:$fontSize;}index.js文件importvariablesScssfrom"./scss.scss";importvariablesLessfrom"./less.less";importvariablesCssfrom"./css.css";//导出变量exportdefault{variablesScss,variablesLess,variablesCss};6、styles文件夹下的代码（变量在样式文件中使用）css-use.css文件@valuevariables:"../variables/css.css";/*从变量中导入变量*/@valuebgcColor,fontSize;/*提取变量*/.box{name:"css";/*这个属性是错误的，它只是用来区分的，可以忽略*/background-color:bgcColor;font-size:fontSize;}less-use.lessfile@import"../variables/less.less";.box{name:"less";/*这个属性是错误的，只是为了区别，可以忽略*/背景色：@mainColor；字体大小：@fontSize；}scss-use.scss文件@import"../variables/scss.scss";.box{name:"scss";/*这个属性是错误的，只是用来区分的，可以忽略*/background-color:$primaryColor;字体大小：$fontSize；}7.main.js代码importVuefrom"vue";importAppfrom"./App.vue";Vue.config.productionTip=false;importvariablesfrom"./variables";console.log(variables,"main-variables");newVue({render:h=>h(App)}).$mount("#app");8.App.vue文件代码
