在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
更新時間：2019年08月12日 10:14:25 作者：子閑
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量
在開發(fā)中有時，我們定義了大量的基礎樣式變量，例如：
大量的vue單文件組件會用到這些變量，每個組件都引人一次又太麻煩。全局引入是個不錯的方法，于是，在main.js 中引入variable.styl文件，但是你會發(fā)現(xiàn)，并不起作用。
在查閱了vue cli官方文檔后發(fā)現(xiàn)，有官方支持的方法。
1、給sass樣式傳入共享的全局變量
有的時候你想要向 webpack 的預處理器 loader 傳遞選項。你可以使用 vue.config.js 中的 css.loaderOptions 選項。比如你可以這樣向所有 Sass 樣式傳入共享的全局變量：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這里假設你有 `src/variables.scss` 這個文件
data: `@import "~@/variables.scss";`
}
}
}
}
2、給stylus樣式傳入共享的全局變量
// vue.config.js 文件
module.exports = {
css: {
loaderOptions: {
// 給 stylus-loader 傳遞選項
stylus: {
import: '~@/common/stylus/color.styl'
}
}
}
}
總結
以上所述是小編給大家介紹的在vue-cli 3中給stylus、sass樣式傳入共享的全局變量,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要為大家介紹了vue動態(tài)代理無須重啟項目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了詳解.vue文件解析的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于降低vue-router版本的2種解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue+axios+element ui 實現(xiàn)全局loading加載示例
今天小編就為大家分享一篇vue+axios+element ui 實現(xiàn)全局loading加載示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了VUE頁面中加載外部HTML的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)文字加密功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue腳手架搭建項目的兼容性配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了uni-app 的基礎組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06