在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量
在開發(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue中extends繼承和組件復(fù)用性的相關(guān)資料,組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue2項(xiàng)目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例
這篇文章主要介紹了vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)雙向綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實(shí)現(xiàn)異步調(diào)度,返回一個(gè) Promise 對(duì)象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-04-04
el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁(yè)功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁(yè)功能(附demo),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架， 開發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12