如何設置 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 的全局變量

通過webpackcss 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM