vue.js - vue公共模块的样式冲突，怎么处理？

问题描述

问 题

项目：vue1.0 + webpack

---

A.vue

<style scoped>
@import "../assets/css/common_player.css";
.button {
    display: block;
    width: 100%;
    height: 40px;
    background-color: #000000;
    color: #fff;
    text-align: center;
    line-height: 40px;
}
</style>

如上面的代码，common_player.css样式只有部分页面在用，但是common_player.css样式由于其他页面的样式冲突了， 设置的scoped对import的样式没有作用，有没有好的办法来解决这个问题喃？难道必须重构css样式吗？

解决方案

设置了scoped的样式，无法起到覆盖其他样式的作用，这个问题我之前也碰到过，于是去掉了scoped, 因此在css class命名的时候就要注意了，加入命名空间的概念，尽量不要重复命名class，以免冲突。

这篇关于vue.js - vue公共模块的样式冲突，怎么处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！