Vue项目,运行时,出现以下错误
ERROR Failed to compile with 1 errors 18:14:44
This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/styl
e-compiler/index?{"vue":true,"id":"data-v-a369cc36","scoped":false,"hasInlineConfig":fals
e}!stylus-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=style
s&index=0!./headerTopComponent.vue in ./src/components/headerTopComponent.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap"
:true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-a3
69cc36","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../no
de_modules/vue-loader/lib/selector?type=styles&index=0!./headerTopComponent.vue
仔细查看报错信息,发现问题出现在我自定义的组件headerTopComponent.vue中。因为该组件是从其他项目中直接拿来使用的,里边用到了stylus语法。而新的Vue项目却没有引入stylus css预处理器,进而导致报错。
<style rel="stylesheet" lang="stylus">
#headerTop
position fixed
left 0
top 0
width: 100%
height: .44rem
z-index 99
background #ffffff
&::after
display block
position absolute
left 0
bottom 0
width: 100%
border-bottom 1px solid #e9e9e9
content ''
#back
position absolute
left 0
bottom 0
width: .2rem
height: .14rem
padding .15rem
// bg-img(icon_back_arrow)
background-repeat no-repeat
background-origin content-box
#title
position absolute
left .42rem
right .42rem
/*bottom .12rem*/
width: 2.79rem
height: .44rem
line-height .44rem
font-size .18rem
color #222
text-overflow ellipsis
white-space nowrap
overflow hidden
text-align center
.goOnBtn
color #1d90e1
</style>
解决办法
安装stylus、stylus-loader依赖
npm install stylus --save-dev // 安装stylus
npm install stylus-loader --save-dev // 安装stylus-loader