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这种不能用的类
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
因为 'scss': 'vue-style-loader!css-loader?!postcss-loader!sass-loader', css-loader后面多加了个 '?'