vue cli3 配置 stylus全局變量的使用方式
更新時(shí)間：2022年08月02日 09:32:17 作者：李逸風(fēng)
這篇文章主要介紹了vue cli3 配置 stylus全局變量的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue cli3配置stylus全局變量
首先在common.styl文件中寫一些常用的css變量，方便全局使用，避免重復(fù)代碼。
預(yù)想的是在main.js中引入common.styl文件，然后所有的.vue文件就都可以使用了。但是事與愿違，根本不起作用。
網(wǎng)絡(luò)上有很多教程，但是都不起作用（找答案是個(gè)痛苦且漫長(zhǎng)的過(guò)程），下面是總結(jié)的代碼，基本開箱即用，希望能幫助到需要幫助的人。
// vue.config.js
module.exports = {
// 配置使用stylus全局變量
chainWebpack: config => {
const types = ["vue-modules", "vue", "normal-modules", "normal"];
types.forEach(type =>
addStyleResource(config.module.rule("stylus").oneOf(type))
);
}
}
// 定義函數(shù)addStyleResource
function addStyleResource(rule) {
rule
.use("style-resource")
.loader("style-resources-loader")
.options({
patterns: [path.resolve(__dirname, "./src/styles/common.styl")] //后面的路徑改成你自己放公共stylus變量的路徑
});
}Tips: 使用vue cli3創(chuàng)建的項(xiàng)目默認(rèn)是沒(méi)有vue.config.js文件的，需要自己在項(xiàng)目根目錄創(chuàng)建。
vue cli3使用stylus全局變量
在vue.config.js中添加以下代碼
const path = require('path')
module.exports = {
// 配置使用stylus全局變量
chainWebpack: config => {
const types = ["vue-modules", "vue", "normal-modules", "normal"];
types.forEach(type =>
addStyleResource(config.module.rule("stylus").oneOf(type))
);
}
};
// ====定義函數(shù)addStyleResource===
function addStyleResource(rule) {
rule
.use("style-resource")
.loader("style-resources-loader")
.options({
patterns: [path.resolve(__dirname, "./src/css/var.styl")] //后面跟著的路徑是你自己放公共stylus變量的路徑
});
}
保存文件，下載依賴即可
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.config.js文件devServer字段的常用選項(xiàng)詳解
在?Vue?CLI?生成的?vue.config.js?文件中,devServer?字段用于配置開發(fā)服務(wù)器的選項(xiàng),本文給大家介紹vue.config.js文件devServer字段的常用選項(xiàng),感興趣的朋友一起看看吧2023-11-11
vue-quill-editor實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue.js編譯時(shí)給生成的文件增加版本號(hào)
這篇文章主要介紹了vue.js編譯時(shí)給生成的文件增加版本號(hào)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue將數(shù)字轉(zhuǎn)為中文大寫金額方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了Vue不定高展開動(dòng)效原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能
這篇文章主要介紹了在Vue3里使用scss實(shí)現(xiàn)簡(jiǎn)單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打地鼠小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要給大家介紹了關(guān)于vue3.0項(xiàng)目快速搭建的相關(guān)資料,本文通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03