vue组件引入css文件报错（vue引入css文件导致全局污染的问题）

时间2025-05-25 02:15:24分类IT科技浏览4290

导读：引入css文件导致全局污染 1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式...

引入css文件导致全局污染

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

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

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

说明问题：

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

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

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";

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。