本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法

从github上看了一下第一次提交时间是2018年10月22号。到现在将近4个月时间，总算是一点一滴的自己一个人完成了这个使用vue做的商城项目。以前看到别人做的这种项目就很羡慕，想着自己也做一个，曾经的憧憬如今总算实现了。一路做过来踩了不少坑，这篇文章就是分享我遇到的这些坑，希望前人爬坑，后人避免。 项目访问地址xuyuechao.top vue单页模式需要注意的坑 1.class样式冲突问题 由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去，导致样式冲突问题。而每个

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。 所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本，最近正好有时间就适配一下。 新增特征 冲突检测 吸附对齐 默认样式优化 功能预览 项目地址 github.com/gorkys/vue-… 如果喜欢该项目，欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件

今天遇到了奇怪的问题，在main.js中引入全局样式，在组件中引用样式时，有些样式失效，有些样式生效。但是神奇的是build打包后样式是正常的。 注册两字没有变成红色。。刚开始以为是class名字命名冲突之类的，网上查了很多资料，有提到说css文件中写了中文注释引起的，试过了不行。后来把所有的样式删掉，只剩一个样式，就生效了。好了，罪魁祸首就是空格符。build打包时会有压缩，所以不会有这个问题。 进入【utils.js】,添加压缩就好了 const cssLoader = { loa

一、污染是如何产生的？ 得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法, [removed][removed] ，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响全局，交叉污染 二、增加 Scoped 标识 依然是 Vue-loader，通过为组件中的 style 标签增加一个 scoped 标识，