Vue中 Css 被外部组件污染的处理
in 前端 with 0 comment

Vue中 Css 被外部组件污染的处理

in 前端 with 0 comment

Css 被外部组件污染的处理

前情提要

由于 css 样式未统一,所以组件的各个模块的 css 不一致,引入的很多杂七杂八的组件,包括 css,其中一个 css 使用了

* {
    padding: 0;
    margin: 0;
}

影响还是比较大的,导致部分模块的富文本无法正常渲染,被重置为 0 了

解决方案

这里可以采用几种解决方案

css revert

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

css revert 可以将 css 重置为未对浏览器未对当前元素进行任何更改时该属性将具有的值

图片描述...

可以将其设置到对应元素属性下面

但其缺点就是很多版本不兼容

图片描述...

不建议使用

使用 normalize.css

Normalize.css 只是一个很小的 css 文件,但它在磨人的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset,Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。总之,Normalize.css 是一种 CSS reset 的替代方案

项目地址: https://github.com/necolas/normalize.css
CDN 源码: https://classic.yarnpkg.com/en/package/normalize.css

然后再项目中引用它,不过需要注意优先级, 必须大于被污染的优先级代码

 只给对应的组件加载 css

删除组件在 main.js 中的 css 加载,移入到需要使用的组件中

图片描述...

赣ICP备17004055号-2