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