老师好,安装了stylus和stylus-loader后运行出错

老师好,安装了stylus和stylus-loader后运行出错

> vuetest@1.0.0 start C:\Users\Administrator\Desktop\作业\mongo测试\vuetest

> npm run dev



> vuetest@1.0.0 dev C:\Users\Administrator\Desktop\作业\mongo测试\vuetest

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js


 10% 1 1 11 1 12% 12% 12% 12%  12% 12% building modules 23/25 modules 2 active ...esktop\作业\mongo测试\vuetest\src\App.  1 1 1 1 1 13% 1 13% 13% building modules 33/38 modules 5 active ...esktop\作业\mongo测试\vuetest\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

 14% 14% 1 14% 1 1 1 14% 1 1 94% asset optimization


 ERROR  Failed to compile with 1 errors                                                                3:39:43 ├F10: PM┤


 error  in ./src/pages/home/components/Header.vue


Module build failed: ParseError: C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\src\pages\home\components\Header.vue:17:1

   13|

   14|

   15|

   16| .header

   17|

-------^


expected "indent", got "eos"


    at Parser.error (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:259:11)

    at Parser.expect (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:287:12)

    at Parser.block (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:918:12)

    at Parser.selector (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:1640:24)

    at Parser.stmt (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:862:31)

    at Parser.statement (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:750:21)

    at Parser.parse (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\parser.js:236:25)

    at Renderer.render (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus@0.54.8@stylus\lib\renderer.js:80:22)

    at C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_stylus-loader@3.0.2@stylus-loader\index.js:167:12

    at tryCatchReject (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\makePromise.js:840:30)

    at runContinuation1 (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\makePromise.js:799:4)

    at Fulfilled.when (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\makePromise.js:590:4)

    at Pending.run (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\makePromise.js:481:13)

    at Scheduler._drain (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\Scheduler.js:62:19)

    at Scheduler.drain (C:\Users\Administrator\Desktop\作业\mongo测试\vuetest\node_modules\_when@3.6.4@when\lib\Scheduler.js:27:9)

    at processTicksAndRejections (internal/process/task_queues.js:79:11)


 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5558831a","scoped":true,"hasInlineConfig":false}!./node_modules/_stylus-loader@3.0.2@stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/home/components/Header.vue 4:14-415 13:3-17:5 14:22-423

 @ ./src/pages/home/components/Header.vue

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/Home.vue

 @ ./src/pages/home/Home.vue

 @ ./src/router/index.js

 @ ./src/main.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,当使用stylus的时候,在css样式中,就需要声明lang="stylus",这是规定:

http://img1.sycdn.imooc.com//climg/5f3cfeaa0944326903190063.jpg

另,请问同学用的是什么编辑器呢?在sublime中打开vue,想要高亮显示,需要安装插件,不过由于sublime官网做了限制,插件可能会安装不成功,所以老师建议同学使用vscode编辑器,我们还有一门免费课课程,同学感兴趣的话可以去看下:https://www.imooc.com/learn/1106

或者在sublime里可以手动设置代码类型,如下:

http://img1.sycdn.imooc.com//climg/5f3cfffd093b80d302420056.jpg

祝学习愉快~

好帮手慕码 2020-08-19 16:08:23

同学你好,查看报错:

http://img1.sycdn.imooc.com//climg/5f3cddbb0901cacd08080457.jpg

可能是因为样式的缩进问题导致的,建议粘代码到问答区经常测试。以便准确帮助同学解答。

祝学习愉快~

  • 提问者 慕雪9296518 #1
    好了,style lang="stylus" scoped是这里的问题,但是我好奇为什么会这样,而且我的样式书写也没有颜色标识
    2020-08-19 16:17:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师