vue中scpoed的作用以及添加scoped后修改第三方库的样式无效问题

小伟同学学前端

于 2021-12-01 13:35:50 发布

阅读量593

点赞数 2

文章标签： vue.js postcss javascript

版权

scoped的引入是为了解决样式污染问题。

通过PostCSS插件来对css代码块进行命名处理，如下：

.line{
    margin-top: 2.17rem;
    width: 13.26rem;
    border-bottom: 3px solid #22233B;
}

经过处理后会变成

.line[data-v-b441dca4]{
    margin-top: 2.17rem;
    width: 13.26rem;
    border-bottom: 3px solid #22233B;
}

再也不用担心重复起名字而导致的css样式污染，更加有利于css的模块化。

在使用第三方样式UI如elementUI时，我们需要在当前组件自定义样式。可以使用如下方案；scoped 穿透；

<style scoped>
	.外层 >>> .第三方组件 { /* ... */ }
</style>

如果使用less

/deep/ 第三方组件