Vue中使用stylus報(bào)錯(cuò)的解決
更新時(shí)間：2022年08月02日 08:56:51 作者：csdn_zhoushengnan
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來看看吧
一、正常配置stylus流程
1.安裝stylus、stylus-loader依賴(進(jìn)入項(xiàng)目文件夾下)
cnpm install stylus stylus-loader
2.package.json文件配置(手動(dòng)添加依賴)
"devDependencies": {
...
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
...
},
3.在build >webpack.base.conf.js中配置存放styl文件夾別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
'@': resolve('src'),
'common':resolve('src/common')
}
},
common :別名
'src/common' :存放styl文件夾
4我的stylus文件夾結(jié)構(gòu)如下圖所示：
5. 在main.js文件中引入index.styl文件
6. 執(zhí)行npm run dev啟動(dòng)，報(bào)錯(cuò)
查遍了網(wǎng)上所有的解答無非就是上面幾個(gè)步驟？那問題到底出在哪里了呢？
二、解決bug
查看stylus和stylus-loader的版本，均為當(dāng)前最新版本
我卸載掉當(dāng)前stylus和stylus-loader，重新安裝了以前的版本
重新npm run dev，成功啟動(dòng)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue-router路由與頁面間導(dǎo)航實(shí)例解析
vue-router 是一個(gè)插件，需要在 Vue 的全局引用中通過 Vue.use()將它引用到 Vue 實(shí)例當(dāng)中。接下來通過本文給大家分享vue-router路由與頁面間導(dǎo)航，需要的朋友參考下吧2017-11-11
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue 自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局,可以通過結(jié)合 CSS 媒體查詢、Vue 的動(dòng)態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆臁ostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下2024-07-07
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題
這篇文章主要介紹了Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vant遇到van-sidebar數(shù)據(jù)超出不能滑動(dòng)的問題
這篇文章主要介紹了vant遇到van-sidebar數(shù)據(jù)超出不能滑動(dòng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案
這篇文章主要介紹了詳解基于Vue/React項(xiàng)目的移動(dòng)端適配方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08