如何讓scss變量能夠當做js變量來使用

當前我們使用scss變量有兩個痛點：

1. 需要手動導入
2. 無法與js建立聯系或者很難，后續不能在此基礎上做一些騷操作 為了解決這兩個問題，我們以創建js文件以json格式定義scss變量，然后通過配置webpack的解析規則來達到即能像普通scss一樣使用，又能作為js變量使用的目的。

豌豆資源搜索網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com

scss變量使用規范

變量創建

所有scss變量在style/variables.scss.js編寫，格式要求為：

1. 只允許使用小寫字母
2. 單詞間以下划線"_"連接
3. 命名應簡潔易懂，以一個大的模塊或高級別的單詞開頭_后面跟功能描述單詞結尾

const variables = {
  'header_height': '60px', 'header_background': `#ededed` } module.exports = variables; 

注意：命名以下划線連接是為了在js文件中能夠單個import, 使用中已經在webpack進行轉換，必須按照此格式！
在scss變量中使用是正常的scss變量：$header-height
在js中使用是定義時的變量格式：import { header_height } from "@/style/variables.scss.js";

變量使用

配置webpack中sass解析方式，一般來說項目構建者已經處理完畢，項目成員無需關心。
使用時無需引入，直接在樣式文件中正常使用即可。

scss中使用示例

.the-nav{ height: $header-height; } 

js中使用示例

import { header_height } from "@/style/variables.scss.js"; ... data(){ return { header_height: header_height } } ... 

配置講解

vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js'); module.exports = { css: { loaderOptions: { sass: { prependData: Object.keys(scssVariables) .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`) .join('\n') } } } }; 

注意：此處有個坑，新版本的sass-loader更換了api參數prependData但是似乎沒有文檔說明

老版本的sass-loader vue.config.js 中 cuecli3+

let scssVariables = require('./src/style/variables.scss.js'); module.exports = { css: { loaderOptions: { sass: { data: Object.keys(scssVariables) .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`) .join('\n') } } } }; 

老版本data => 新版本 prependData

webpack.config.js中 vuecli2

let scssVariables = require('./src/style/variables.scss.js'); ... { test: /\.scss$/, use: [ 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: { data: Object.keys(scssVariables) .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`) .join('\n') } } ] } ... 

經過一番姿勢，到這里已經可以成功解鎖新世界啦~~~~