javascript - 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这种不能用的类

解决方案

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

这篇关于javascript - vue 组件的scoped 和 scss 的嵌套冲突。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！