在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
在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)注明出處，謝謝！
相關(guān)文章
vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了詳解.vue文件解析的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue+axios+element ui 實(shí)現(xiàn)全局loading加載示例
今天小編就為大家分享一篇vue+axios+element ui 實(shí)現(xiàn)全局loading加載示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本篇文章主要介紹了VUE頁(yè)面中加載外部HTML的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字加密功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue腳手架搭建項(xiàng)目的兼容性配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了uni-app 的基礎(chǔ)組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的函數(shù) Object.defineProperty，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06