如何讓scss變量可以當作js變量來使用

如何讓scss變量可以當作js變量來使用

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

1. 須要手動導入
2. 沒法與js創建聯繫或者很難，後續不能在此基礎上作一些騷操做

爲了解決這兩個問題，咱們以建立js文件以json格式定義scss變量，而後經過配置webpack的解析規則來達到即能像普通scss同樣使用，又能做爲js變量使用的目的。

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')
      }
    }
  ]
}
...

通過一番姿式，到這裏已經能夠成功解鎖新世界啦~~~~

用優雅的姿式掉頭髮~ 哦不碼代碼~

GitHub 歡迎交友