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

发布于 2022-09-05 04:46:48 字数 1026 浏览 7 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

懒猫 2022-09-12 04:46:49

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文