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

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

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

</template>
<script></script>
<style scoped lang="scss" 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这种不能用的类

阅读 5.6k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题