我项目的报错信息如下:
error in ./src/component/tree/sortable.vue
Module build failed:
.hello {
^
Invalid CSS after ".hello {": expected "}", was "{"
in D:\test\element2.0\learning3.0\src\component\tree\sortable.vue (line 350, column 9)
@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":true}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-fbc11e94","scoped":true,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"indentedSyntax
":true,"sourceMap":true}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/component/tree/sortable.vue 4:14-430 13:3-17:5 14:22-438
@ ./src/component/tree/sortable.vue
@ ./src/router/route.js
@ ./src/main.js
@ multi ./build/dev-client babel-polyfill ./src/main.js
.vue文件相关代码:
<style lang="sass" scoped> .hello { background: #fff; padding: 20px; } .custom-tree-content { position: relative; top: 2px; z-index: 1; background: rgba(245, 245, 245, .8); padding: 0 10px; & .exitChild { margin-left: -7px; } } </style>
解决:
<style lang="sass" scoped>
改为
<style lang="scss" scoped>
亲测有效。
原因:我们写的是 scss
语法,不是 sass
语法,lang 改成 scss
就可以了。
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
参考:https://segmentfault.com/q/1010000008750593/a-1020000008750612