Some time ago, I encountered the need to change the skin of the website. I thought it would be quite simple, just use Sass or Less to set the variables. The result is the style set in js.
It has to be set separately, so troublesome.
The code of this article gitHub address https://github.com/lxf/variables-css-less-sass-js
At this time, if the style file and the js file can share variables, then this problem will be solved. After checking a lot of information, the final solution is as follows:
1. Principle introduction: Through webpack and css module, we can use variables defined in style Sass, Less, Css files in js.
2. Environment: node: v8.10.0 vue-cli:3.5.3
3.package.json (scss and less and its loader are installed first, vue-cli: webpack has been configured under 3.5.3)
{
"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. File directory
5. The code (core code) css.css file under the
variables folder
/* @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 file
@mainColor: #398bd0;
@fontSize: 100px;
// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
name: "less";
mainColor: @mainColor;
fontSize: @fontSize;
}
scss.scss file
$primaryColor: #f4d020;
$fontSize: 11px;
// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
name: "scss";
primaryColor: $primaryColor;
fontSize: $fontSize;
}
index.js file
import variablesScss from "./scss.scss";
import variablesLess from "./less.less";
import variablesCss from "./css.css";
// 导出变量
export default {
variablesScss,
variablesLess,
variablesCss
};
6. Code under the styles folder (variables used in style files)
css-use.css file
@value variables: "../variables/css.css"; /* 导入变量*/
@value bgcColor, fontSize from variables;/* 取出变量*/
.box {
name: "css"; /* 此属性错误，仅用于区分，可忽略*/
background-color: bgcColor;
font-size: fontSize;
}
less-use.less file
@import "../variables/less.less";
.box {
name: "less";/* 此属性错误，仅用于区分，可忽略*/
background-color: @mainColor;
font-size: @fontSize;
}
scss-use.scss file
@import "../variables/scss.scss";
.box {
name: "scss"; /* 此属性错误，仅用于区分，可忽略*/
background-color: $primaryColor;
font-size: $fontSize;
}
7.main.js code
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 file code
<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. The final effect
as shown in the figure, we get the style variable in the js file (or vue file), and finally quote a sentence from the third material to end this article
Sharing variables between environments is the holy grail of programming
Reference materials
http://www.ruanyifeng.com/blog/2016/06/css_modules.html
https://github.com/css-modules/css-modules/blob/master/README.md
https://www. bluematador.com/blog/how-to-share-variables-between-js-and-sass
https://github.com/css-modules/css-modules
https://github.com/css-modules/css- modules/issues/106