少し前に、ウェブサイトのスキンを変更する必要がありました。SassまたはLessを使用して変数を設定するだけで、非常に簡単だと思いました。その結果、jsでスタイルが設定されます。
別途設定する必要があり面倒です。
この記事のコードgitHubアドレスhttps://github.com/lxf/variables-css-less-sass-js
現時点で、スタイルファイルとjsファイルが変数を共有できる場合、この問題は解決されます。多くの情報を確認した後、最終的な解決策は次のとおりです。
1.原則の紹介：webpackおよびcssモジュールを介して、jsのSass、Less、Cssファイルのスタイルで定義された変数を使用できます。
2.環境：ノード：v8.10.0 vue-cli：3.5.3
3.package.json（scss以下とそのローダーが最初にインストールされます。vue-cli：webpackは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.ファイルディレクトリ
5.変数フォルダーの下のコード（コアコード）
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ファイル）でstyle変数を取得し、最後に3番目の資料から文を引用してこの記事を終了します。
環境間で変数を共有することは、プログラミングの聖杯です
参考資料
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-モジュール/問題/ 106