在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
更新時間：2019年08月12日 10:14:25 作者：子閑
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量
在開發(fā)中有時，我們定義了大量的基礎(chǔ)樣式變量，例如：
大量的vue單文件組件會用到這些變量，每個組件都引人一次又太麻煩。全局引入是個不錯的方法，于是，在main.js 中引入variable.styl文件，但是你會發(fā)現(xiàn)，并不起作用。
在查閱了vue cli官方文檔后發(fā)現(xiàn)，有官方支持的方法。
1、給sass樣式傳入共享的全局變量
有的時候你想要向 webpack 的預(yù)處理器 loader 傳遞選項。你可以使用 vue.config.js 中的 css.loaderOptions 選項。比如你可以這樣向所有 Sass 樣式傳入共享的全局變量：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這里假設(shè)你有 `src/variables.scss` 這個文件
data: `@import "~@/variables.scss";`
}
}
}
}
2、給stylus樣式傳入共享的全局變量
// vue.config.js 文件
module.exports = {
css: {
loaderOptions: {
// 給 stylus-loader 傳遞選項
stylus: {
import: '~@/common/stylus/color.styl'
}
}
}
}
總結(jié)
以上所述是小編給大家介紹的在vue-cli 3中給stylus、sass樣式傳入共享的全局變量,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue中extends繼承和組件復(fù)用性的相關(guān)資料,組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue2項目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
vant picker+popup 自定義三級聯(lián)動案例
這篇文章主要介紹了vant picker+popup 自定義三級聯(lián)動案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)雙向綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要介紹了vue實現(xiàn)百度下拉列表交互操作,結(jié)合實例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue是一套構(gòu)建用戶界面的框架， 開發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下2019-12-12