乐趣区

Javascript如何与Sass,Less,Css之间共享变量?

原博文地址,此博文首次发于 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…

退出移动版