vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue引入css文件导致全局污染

vue引入css文件导致全局污染的问题

作者:四月_h

这篇文章主要介绍了vue引入css文件导致全局污染的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

引入css文件导致全局污染

1.写在单组件的style里面css样式,如果标签内不加scoped可能会影响其他组件的样式

<style scoped></style>

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

所以可以通过一下方法引入,则不会影响其他组件的页面样式

<style src="文件路径"></style>

vue避免全局样式污染的正确做法

说明问题:

样式全局污染产生的bug,会影响到其他页面原有的样式,导致每个页面的样式互相冲突,如果写的代码造成了全局样式污染,导致别人的页面每个地方都要去写自定义页面的代码,导致工作量巨大,严重的话,领导会让你当场辞职。

解决方案

1.避免造成全局污染,每个vue页面必须加上scoped

<style lang="scss" scoped>
.app-container {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  background: #fafafa;
</style>

2.如果要修改element ui里面的底层样式,需要修改的页面加上::v-deep

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

3.如果所有的页面都复用使用main.js引入public.scss,具体的代码在这个scss里面写

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

4.如果几个页面复用,那么在styles文件夹,里面创建个独立的scss,复用的代码写在这个文件里面。

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文