|
我项目的报错信息如下：
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 —— 是sass3.0引入的语法，可以理解scss是sass的一个升级版本的语法和css书写语法类似，使用大括号和分号；
| 
转播
