如何設置 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