如何設置 sass 全局變量，js如何使用 sass 變量

關鍵詞：sass全局變量 js引用sass變量

1 如何在樣式中使用 scss 的聲明的全局變量

假設咱們有一個全局的 scss 變量文件/styles/_vars.sass，以下：

$red: red;
$blue: blue;

若是想要在組件的樣式中使用這些變量，咱們須要引入這個文件，像這樣：

<style lang="scss" scoped>

@import '/styles/_var.scss';

.login {
  background-color: $red;
}
</style>

這種方式雖然解決了問題，但帶來了不少問題：代碼冗餘、很差維護...

咱們迫切須要一種全新的更優雅的方法——sass-resources-loader

該加載器將 sass 資源自動導入每一個所需的 sass 模塊。 所以，您能夠在全部 sass 樣式中使用共享變量和mixin，而無需在每一個文件中手動導入它們。
注意，此loader不限於sass，並適用於 less，post-css等。
Supports Webpack 4.

官方github上對於不一樣的配置都給出詳細的說明，請參考sass-resources-loader

2 如何在 js 中使用 sass 的全局變量

經過webpack和css module，咱們能夠輕鬆的在 js 中使用 sass 文件中定義的全局變量。

第一步，安裝須要的依賴：

npm install sass-loader node-sass webpack --save-dev

第二步使用sass-loader配置webpack，這樣咱們就能在 js 中使用 sass 變量了。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

如今，咱們在 sass 文件中定義變量並將其導出爲 js，CSS Module 有一個:export關鍵字，它在功能上等同於 ES6 的關鍵字export，即導出一個 js 對象。

// /styles/global.scss

$exportedValue: #ccc;

:export {
  exportedKey: $exportedValue;
    /* ... */
}

如今，咱們能夠在 js 中使用這個變量啦。

// js/test.js

import styles from '/styles/global.scss'
console.log(styles)

參考

css-modules
sass-resources-loader
how-to-share-variables-between-js-and-sass