vue cli3 配置 stylus全局變量的使用方式
更新時間：2022年08月02日 09:32:17 作者：李逸風
這篇文章主要介紹了vue cli3 配置 stylus全局變量的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue cli3配置stylus全局變量
首先在common.styl文件中寫一些常用的css變量，方便全局使用，避免重復代碼。
預想的是在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)建的項目默認是沒有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實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue Element前端應(yīng)用開發(fā)之表格列表展示
在我們一般開發(fā)的系統(tǒng)界面里面，列表頁面是一個非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁處理，以及對每項列表內(nèi)容可能進行的轉(zhuǎn)義處理，本篇隨筆介紹基于Vue +Element基礎(chǔ)上實現(xiàn)表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理。2021-05-05
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結(jié)構(gòu)分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結(jié)構(gòu)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
vuex中this.$store.commit和this.$store.dispatch的基本用法實例
在vue的項目里常常會遇到父子組件間需要進行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
AntV?組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導出，這篇文章主要介紹了AntV結(jié)合Vue實現(xiàn)導出圖片功能,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue訪問未定義的路由時重定向404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue實現(xiàn)導入Excel功能,本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
本文主要介紹了vue3開啟攝像頭并進行拍照的實現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
防抖節(jié)流就是使用定時器 來實現(xiàn)我們的目的。這篇文章通過實例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧2019-11-11
這篇文章主要介紹了vue項目中微信登錄的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09