css污染-Vue引入css文件造成全球污染

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

目录

引入css文件导致全球污染

1、将css样式写在单个组件的样式上。 如果标签中不添加scoped，可能会影响其他组件的样式

2.通过import导入的外部css文件，这些导入方式是全局的，也会影响其他组件的页面样式

所以可以通过下面的方式引入，并且不会影响其他组件的页面样式

vue防止全局样式污染的正确方法

解释一下问题：

全局样式污染引起的Bug会影响其他页面原有的样式，导致各个页面的样式相互冲突。 如果写的代码导致了全局样式污染，就会导致别人的页面不得不到处写自定义页面。 代码，造成工作量巨大，严重的话领导会让你当场离开。

解决方案

1.为了防止全局污染css污染，每个vue页面都要添加scoped

.app-container {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  background: #fafafa;

2、如果想改变elementui上的底层样式，在需要改变的页面添加::v-deep

::v-deep {
  .el-input,
  .el-select {
    display: inline-block;
    width: 240px;
  }
  .radioGroup {
    width: 240px;
  }
}

3、如果所有页面都复用，使用main.js引入public.scsscss污染，具体代码就写在这个scss上。

import "@/assets/styles/public.scss" // global css

4、如果有多个页面被复用，则在styles文件夹下创建一个独立的scss，将复用的代码写入该文件中。

@import "~@/assets/styles/apply.scss";

以上是个人经验，希望能给大家一个参考，也希望大家支持云海天教程。