vue-cli 中集成sass报错

Question

使用vue-cli搭建的
npm install node-sass sass-loader --save-dev
正常安装了

代码如下
<template>
<div class="tabMain">

<table>
  <thead>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
  </tbody>
</table>

</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {

return {
  // msg: 'Welcome to Your Vue.js App'
}

}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--style scoped>
.tab{

text-align: center;
margin: 0 auto;

}
</style-->
<style lang="sass" scoped>
.tabMain{

}

</style>

sass报错如下

Module build failed:
undefined
        ^
      Invalid CSS after ".tabMain{": expected "}", was "{}"
      in D:\wYcom\braTab\src\components\braTab.vue (line 61, column 10)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-346945b4","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/braTab.vue 4:14-397 13:3-17:5 14:22-405
 @ ./src/components/braTab.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js



 WAIT  Compiling...                                                                                                                   14:22:48

 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                               14:22:48

 error  in ./src/components/braTab.vue

Module build failed:
undefined
        ^
      Invalid CSS after ".tabMain{": expected "}", was "{}"
      in D:\wYcom\braTab\src\components\braTab.vue (line 61, column 10)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-346945b4","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/braTab.vue 4:14-397 13:3-17:5 14:22-405
 @ ./src/components/braTab.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

这个百度上面有教如何webpack配置sass的
webpack.config.js要配置scss-loader
还有
<style lang=“scss”>