// 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)是沒有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變量的路徑
    });
}

保存文件，下載依賴即可

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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