vue 组件的scoped 和 scss 的嵌套冲突。

Question

在vue组件中的样式使用scoped,但是和scss的嵌套有冲突，编译出了错误代码。

vue:组件

<template>

<div class="parent">

    <div class="parent_child"></div>

</div>

</template>

<script></script>

<style scoped rel="stylesheet/scss">

.parent {

    height: 20px;  width: 30px;  background-color: #000;

    &_child {  height: 10px; width: 10px;  background-color: #fff; }

}

</style>

编译出的样式代码：

.parent[data-v-7c164664] {

height: 20px;

width: 30px;

background-color: #000; 

}

.parent[data-v-7c164664]_child {

height: 10px;

width: 10px;

background-color: #fff; 

}

vue loader

{

  test: /\.vue/,

  loader: 'vue-loader',

  options: {

    loaders: {

      'scss': 'vue-style-loader!css-loader?!postcss-loader!sass-loader',

    }

  }

},

生成出了.parent[data-v-7c164664]_child这种不能用的类

Answer 1

因为 'scss': 'vue-style-loader!css-loader?!postcss-loader!sass-loader', css-loader后面多加了个 '?'