原博文地点，此博文初次发于csdn，原创

前段时间碰到网站换肤的需求，本想挺简朴的，直接用 Sass 或许 Less 设置变量就好了，结果致使的题目就是 js 中设置的款式

得零丁设置，好麻烦。

本文章代码gitHub地点 https://github.com/l-x-f/variables-css-less-sass-js

这个时刻假如能让款式文件和 js 文件完成变量同享，那这个题目就处理了。查了很多材料，终究的处理方案以下：

1.道理引见：经由过程 webpack 和 css module，我们能够在 js 中运用款式 Sass,Less,Css 文件中定义的变量。

2.环境： node: v8.10.0 vue-cli:3.5.3

3.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-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "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 定义变量，然后运用。

@value bgcColor: red;   会导出@ 背面的变量，
在:export {}  能够取到该变量，也能够导出
他们在功能上等同于 ES6 的关键字export，即导出一个 js 对象。*/

@value bgcColor: red;
@value fontSize: 10px;

/*   这里能够直接运用
.demo { 
  background-color: bgcColor;
  font-size: fontSize;
} */


/*  CSS Module  导出 
 :export {
  cssExportBgcColor: bgcColor;
}
 */

less.less文件

@mainColor: #398bd0;
@fontSize: 100px;

// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
  name: "less";
  mainColor: @mainColor;
  fontSize: @fontSize;
}

scss.scss文件

$primaryColor: #f4d020;
$fontSize: 11px;

// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
  name: "scss"; 
  primaryColor: $primaryColor;
  fontSize: $fontSize;
}

index.js文件

import variablesScss from "./scss.scss";
import variablesLess from "./less.less";
import variablesCss from "./css.css";

// 导出变量
export default {
  variablesScss,
  variablesLess,
  variablesCss
};

6.styles文件夹下代码（款式文件中运用变量）

css-use.css文件

@value variables: "../variables/css.css"; /* 导入变量*/
@value bgcColor, fontSize from variables;/* 掏出变量*/

.box {
  name: "css"; /* 此属性毛病，仅用于辨别，可疏忽*/
  background-color: bgcColor;
  font-size: fontSize;
}

less-use.less文件

@import "../variables/less.less";

.box {
  name: "less";/* 此属性毛病，仅用于辨别，可疏忽*/
  background-color: @mainColor;
  font-size:  @fontSize;
 
}

scss-use.scss文件

@import "../variables/scss.scss";

.box {
  name: "scss"; /* 此属性毛病，仅用于辨别，可疏忽*/
  background-color: $primaryColor;
  font-size: $fontSize;
 
}

7.main.js代码

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
import variables from "./variables";

console.log(variables, "main-variables");

new Vue({
  render: h => h(App)
}).$mount("#app");

8.App.vue文件代码

<template>
  <div id="app" class="box"></div>
</template>

<script>
// variables in  js
import variables from "./variables";
export default {
  name: "home",
  components: {},
  data() {
    return {
      variables: { ...variables }
    };
  },
  created() {
    console.log(this.variables, "App-this.variables");
  }
};
</script>

<!--css -->
<style lang="css">
#app {
  height: 500px;
}
@import "./styles/css-use.css";
</style>


<!--scss -->
<style lang="scss">
@import "./styles/scss-use.scss";
</style>

<!-- less-->
<style lang="less">
@import "./styles/less-use.less";
</style>

9.末了的结果



如图我们在js文件（或vue 文件）中取到款式变量，末了援用第三个材估中的一句话完毕本文章

环境之间同享变量是编程的圣杯

参考材料
http://www.ruanyifeng.com/blo…
https://github.com/css-module…
https://www.bluematador.com/b…
https://github.com/css-module…
https://github.com/css-module…