關鍵詞: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