vue.js - Module build failed 实践模块构建失败

问题描述

问 题

在使用vue.js时用minix.styl时出现如下错误：

ERROR Failed to compile with 1 errors 09:28:43

error in ./src/components/header/header.vue

Module build failed: ParseError: E:practiceprojectsellAppsrccomponentsheaderheader.vue:115:2
111| &.invoice
112| background-img('invoice_1')
113| &.guarantee
114| background-img('guarantee_1')
115| }
---------^
116| .header .content-wrapper .support-count {
117| position: absolute;
118| right: 12px;

unexpected "}"

                                                                                                                                                                    
at Parser.error (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:257:11)                                                                      
at Parser.stmt (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:812:32)                                                                       
at Parser.statement (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:683:21)                                                                  
at Parser.block (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:845:21)                                                                      
at Parser.selector (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:1546:24)                                                                  
at Parser.stmt (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:794:27)                                                                       
at Parser.statement (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:683:21)                                                                  
at Parser.block (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:845:21)                                                                      
at Parser.selector (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:1546:24)                                                                  
at Parser.stmt (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:794:27)                                                                       
at Parser.statement (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:683:21)                                                                  
at Parser.block (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:845:21)                                                                      
at Parser.selector (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:1546:24)                                                                  
at Parser.stmt (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:794:27)                                                                       
at Parser.statement (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:683:21)                                                                  
at Parser.block (E:\practice\project\sellApp\node_modules\.0.52.4@stylus\lib\parser.js:845:21)                                                                      
                                                                                                                                                                    

@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-rewriter.js?{"id":"data-v-3a419b8f","scoped":false,"hasInlineConfig
":true}!./~/.2.5.0@stylus-loader?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue 4:14-391 13:3-17:5 14:22-399
@ ./src/components/header/header.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

部分代码：
styles：

.header .content-wrapper .content .support .icon {
display :inline-block;
width: 12px;
height: 12px;
margin-right: 4px;
background-size: 12px 12px;
background-repeat: no-repeat;
&.decrease
  background-img('decrease_1')
&.discount
  background-img('discount_1')
&.special
  background-img('special_1')
&.invoice
  background-img('invoice_1')
&.guarantee
  background-img('guarantee_1')

}
script：

create () {
  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
}

html：

<span class="icon" :class="classMap[seller.supports[0].type]"></span>

minix.styl:
background-img($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)

background-image: url($url + "@3x.png")
                                                                                                                                                                  
                                                                                                                                                                    
                                                                                                                                                                    

解决方案

我也出现了这个问题，原因是在多出来一个右括号}.大家可以认真找找自己的stylus代码，是不是多了这个该死的括号，希望可以帮到忙

这篇关于vue.js - Module build failed 实践模块构建失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！