在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量

在開(kāi)發(fā)中有時(shí)，我們定義了大量的基礎(chǔ)樣式變量，例如：

大量的vue單文件組件會(huì)用到這些變量，每個(gè)組件都引人一次又太麻煩。全局引入是個(gè)不錯(cuò)的方法，于是，在main.js 中引入variable.styl文件，但是你會(huì)發(fā)現(xiàn)，并不起作用。

在查閱了vue cli官方文檔后發(fā)現(xiàn)，有官方支持的方法。

1、給sass樣式傳入共享的全局變量

有的時(shí)候你想要向 webpack 的預(yù)處理器 loader 傳遞選項(xiàng)。你可以使用vue.config.js中的css.loaderOptions選項(xiàng)。比如你可以這樣向所有 Sass 樣式傳入共享的全局變量：

// vue.config.js

module.exports = {

css: {

loaderOptions: {

// 給 sass-loader 傳遞選項(xiàng)

sass: {

// @/ 是 src/ 的別名

// 所以這里假設(shè)你有 `src/variables.scss` 這個(gè)文件

data: `@import "~@/variables.scss";`

}

}

}

}

2、給stylus樣式傳入共享的全局變量

// vue.config.js 文件

module.exports = {

css: {

loaderOptions: {

// 給 stylus-loader 傳遞選項(xiàng)

stylus: {

import: '~@/common/stylus/color.styl'

}

}

}

}

總結(jié)

以上所述是小編給大家介紹的在vue-cli 3中給stylus、sass樣式傳入共享的全局變量,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

總結(jié)

以上是生活随笔為你收集整理的vuecli3 引入全局scss变量_在vue-cli 3中给stylus、sass样式传入共享的全局变量的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。