vue 的.vue文件中写局部sass报错 Invalid CSS after ".sass{": expected "}", was "{"

我项目的报错信息如下：

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书写语法类似，使用大括号和分号；