Javascript如何與Sass,Less,Css之間共享變量？

CloudDeveloper 發(fā)布于2019-08-29 18:33 / 2315人閱讀

摘要：環(huán)境和及其等先安裝，下已配置如何之間共享變量文件目錄文件夾下代碼核心代碼文件定義變量，然后使用。文件有一個(gè)關(guān)鍵字，它在功能上等同于的關(guān)鍵字，即導(dǎo)出一個(gè)對象。

原博文地址，此博文首次發(fā)于csdn，原創(chuàng)

前段時(shí)間遇到網(wǎng)站換膚的需求，本想挺簡單的，直接用 Sass 或者 Less 設(shè)置變量就好了，結(jié)果導(dǎo)致的問題就是 js 中設(shè)置的樣式

得多帶帶設(shè)置，好麻煩。

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

這個(gè)時(shí)候如果能讓樣式文件和 js 文件實(shí)現(xiàn)變量共享，那這個(gè)問題就解決了。查了好多資料，最終的解決方案如下：

1.原理介紹：通過 webpack 和 css module，我們可以在 js 中使用樣式 Sass,Less,Css 文件中定義的變量。

2.環(huán)境： 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;   會導(dǎo)出@ 后面的變量，
在:export {}  可以取到該變量，也可以導(dǎo)出
他們在功能上等同于 ES6 的關(guān)鍵字export，即導(dǎo)出一個(gè) js 對象。*/

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

/*   這里可以直接使用
.demo { 
  background-color: bgcColor;
  font-size: fontSize;
} */


/*  CSS Module  導(dǎo)出 
 :export {
  cssExportBgcColor: bgcColor;
}
 */

less.less文件

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

// CSS Module 有一個(gè):export關(guān)鍵字，它在功能上等同于 ES6 的關(guān)鍵字export，即導(dǎo)出一個(gè) js 對象。
:export {
  name: "less";
  mainColor: @mainColor;
  fontSize: @fontSize;
}

scss.scss文件

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

// CSS Module 有一個(gè):export關(guān)鍵字，它在功能上等同于 ES6 的關(guān)鍵字export，即導(dǎo)出一個(gè) 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";

// 導(dǎo)出變量
export default {
  variablesScss,
  variablesLess,
  variablesCss
};

6.styles文件夾下代碼（樣式文件中使用變量）

css-use.css文件

@value variables: "../variables/css.css"; /* 導(dǎo)入變量*/
@value bgcColor, fontSize from variables;/* 取出變量*/

.box {
  name: "css"; /* 此屬性錯誤，僅用于區(qū)分，可忽略*/
  background-color: bgcColor;
  font-size: fontSize;
}

less-use.less文件

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

.box {
  name: "less";/* 此屬性錯誤，僅用于區(qū)分，可忽略*/
  background-color: @mainColor;
  font-size:  @fontSize;
 
}

scss-use.scss文件

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

.box {
  name: "scss"; /* 此屬性錯誤，僅用于區(qū)分，可忽略*/
  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文件代碼

9.最后的效果

如圖我們在js文件（或vue 文件）中取到樣式變量，最后引用第三個(gè)資料中的一句話結(jié)束本文章

環(huán)境之間共享變量是編程的圣杯

參考資料
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...