Vue中引入外部css导致的全局污染

最新推荐文章于 2024-10-22 11:52:30 发布
最新推荐文章于 2024-10-22 11:52:30 发布
阅读量1.9k 收藏 5
点赞数 5
CC 4.0 BY-SA版权
文章标签： vue.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ation_work/article/details/132104078
本文讲述了在Vue前端开发中遇到的CSS全局污染问题，主要由未使用scoped和`@import`引入全局CSS导致。作者提供了通过src引入外部样式并设置scoped来解决此类问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

当在前端使用vue开发时，给特定页面做好了css并且通过import去导入到当前页面；在编译运行之后发现其他页面也受到影响更改了样式，即“全局污染”。

污染方式

  1. 单组件污染
    单个组件样式，影响到了其他的组件的样式。
    单个组件污染的问题主要表现在< style>样式< /style>上不加 scoped;
    scoped的作用就是让样式只作用于当前组件，如果没有 scoped，那么样式就有可能影响其他组件。
  2. 多组件污染
    多个组件在会共用一套CSS代码时，就会造成多组件污染的情况：
    <style scoped> @import "assets/css/common.css"; </style>
    这种方式也会造成全局污染的情况；但是已经加了scoped，最后无效的原因是“@import”，原因如下：
    @import并不是直接引入css代码到页面，而是发起新的不带scoped的请求获得样式资源；因此，这种引用方式是全局的，从而引起全局污染。

    解决办法

    在VUE中，页面是被允许添加多个Style、Script的，所以可以再添加一个Style通过src的方式去获取样式资源就能解决样式污染问题：

    <style src="@/assets/css/yours.css"  scoped>
</style>
ation_work
关注
Vue中引入外部字体
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
vue引入css文件导致全局污染
weixin_46389242的博客
04-25 3413
1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式 <style scoped></style> 2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式 所以可以通过一下方法引入，则不会影响其他组件的页面样式 <style src="文件路径"></style> ...
Vue中import 引入样式文件污染问题，手动测试过几乎所有情况
weixin_54495706的博客
04-21 1454
只有当lang='css'的时候，这两种引入方式都会污染，必须通过标签内引入才可以当lang='scss'的时候（less我没测，我估计跟scss同理，我实际项目都是用less这样引入局部样式）// 这种不会全局污染！！！// 这种会全局污染。
局部作用域内(scoped)使用@import引入css引发的css全局污染的问题
qq_33444716的博客
07-07 1628
css-loader对import的文件会当做外部资源，那么我能理解为它是把import的css文件单独提取出来，并没有把其中的样式放在中解析，而是最后把中计算结果和import的css文件混合后，交由style-loader最后解析为style标签加载在页面。但是有的博客说引入的如果是less等于编译文件会局部生效，但是我在项目中引入的scss文件并未有局部生效，而是影响到其他页面。
Vue使用@import 引入样式文件全局污染、使用scoped失效问题
热门推荐
qq_39441438的博客
12-15 1万+
scoped 在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。 <style lang="scss" scoped> @import url("/style/index.scss") <style> 上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。 所以改写成src的方式引入。 <style lang="scss" src="/style/index.sc
vue2中单文件组件引入外部css，scoped失效导致样式全局污染
weixin_45696837的博客
01-22 1839
如果你在学习vue，相信一定对style标签的scoped属性很熟悉。 使用scoped属性可以防止单文件组件的样式全局化造成样式污染。 但有一个坑，外部引入的css,less,scss文件可能会出现scoped失效。 我去看了一下，最终生成的样式文件并没有生成data-v-xxxxx来预防全局样式污染。 解决方法 通过style的src引入外部样式文件 ...
vue.js引入外部CSS样式和外部JS文件的方法
10-17
这篇文章详细介绍了如何在Vue.js项目中引入外部CSS和JS文件的方法。 首先，让我们了解如何引入外部CSS样式文件。在Vue项目中，通常在`.vue`单文件组件的`<style>`标签内直接使用@import语句来引入外部的CSS文件。...
Vue项目中引入外部文件的方法（css、js、less）
10-19
在Vue项目中，正确地引入外部文件如css、js和less是...通过本文的介绍，我们可以了解到在Vue项目中引入外部css、js和less文件的具体方法和步骤。正确地掌握这些知识，对于提高开发效率和保证项目质量有着重要的意义。
vue组件内部引入外部js文件的方法
10-15
在Vue中引入外部JavaScript文件的目的是为了在特定组件内部使用外部资源或功能，而避免全局作用域污染。随着前端项目的日渐复杂，将JS文件按需引入到Vue组件内部变得越来越普遍和重要。接下来，我们将详细探讨如何在...
Vue中引入样式文件的方法
08-29
在 index.html 模板文件中，我们可以使用 `<link>` 标签引入外部的样式文件。这种方式引入的样式文件将被编译到生成的 HTML 文件中。如果我们想要通过 `<link>` 标签引入外部的样式文件，这种方式是非常适合的。 ...
import 引入样式污染全局
qq_45311650的博客
10-26 322
今天项目样式突然出问题了，然后排查问题，查看被修改的样式，但是当前页面并没有引入这个样式所在的文件，也是感到很奇怪，上网一查才知道，因此，这种引用方式是全局的，从而引起全局污染，要想引用可以放到style里边。
Vue中外部引入样式污染全局的问题
iloveCodingC的博客
04-23 6149
vue中组件的引入外部样式时通常采用@import “样式文件路径” 比如 <style> @import "assets/css/base.css"; </style> 这样比较适用全局组件的初始化，或则适用于多个组件共用同一套样式， 全局组件样式初始化这个比较好理解，现在我们就来谈谈局部样式（单个组件与多个组件）污染的问题 单个组件污染的问题主要表现在< st...
vue使用@import引入样式文件全局污染,使用scoped失效的问题
猪,你的鼻子有两个孔
10-22 681
vue使用@import引入样式文件全局污染,使用scoped失效的问题
vue 使用@import引入样式文件scoped无效造成全局样式污染
m0_73202019的博客
10-12 2533
样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。4.如果几个页面复用，那么在styles文件夹，里面创建个独立的scss，复用的代码写在这个文件里面。1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式。2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式。
vue中scss样式污染引发的思考
水镜先生的博客
02-28 799
样式污染
Vue.mixin 设置共用字段，要考虑不能全局污染，犯的一个错误写下里
weixin_39897287的博客
03-06 524
我一开始是这样使用的：（nuxt环境下建立的项目） 建立一个tool.js文件，放在plugins文件夹里面，然后在nuxt.config.js中设置一下：（和vue的main.js设置的原理一样） 然后我在tool.js文件中这样写是不对的： 因为这样会造成全局污染，任何一个页面都不能用到orderStatusList这个字段了，而且暂用的空间也很多，产生字节浪费。其实我可以这样写： ...
Vue在全局、局部中引入css
m0_56588258的博客
10-17 1303
Vue在全局、局部中引入css
解决css全局污染的问题
qq_43673344的博客
07-11 3065
由于css都是全局的，因此在变量className相同时就会发生冲突。 react中自动生成的webpack文件中，使用CSS-module可以消除全局污染的问题，只对引用的目录下的样式文件进行编译。 在option中把modules变量设置为true ...
Vue3引入外部css
最新发布
05-16
### Vue3 中引入外部 CSS 文件的方法 在 Vue3 项目中，可以通过多种方式引入外部 CSS 文件。以下是几种常见的方法： #### 方法一：全局引入 可以在 `main.js` 或者项目的入口文件中通过 JavaScript 的 `import` 语句来加载 CSS 文件。这种方式会使得该 CSS 文件在整个应用范围内生效。 ```javascript // main.js import './assets/styles/global.css'; ``` 这种方法适用于需要在整个应用程序中使用的通用样式表[^1]。 --- #### 方法二：局部组件内引入 如果只需要在一个特定的组件中使用某个 CSS 文件，则可以利用 `<style>` 标签中的 `@import` 来实现。需要注意的是，在这种情况下通常建议加上 `scoped` 属性以防止样式的污染。 ```html <template> <div class="example">这是一个示例</div> </template> <style scoped> @import '../assets/styles/example.css'; /* 这里必须加分号 */ .example { color: red; } </style> ``` 注意：当使用 `@import` 方式时，务必记得在最后添加分号；否则可能会引发错误[^4]。 --- #### 方法三：通过 Webpack 配置支持其他预处理器 (如 SCSS/SASS) 对于更复杂的场景（比如 SASS），可能还需要额外配置构建工具链的支持。例如，如果你希望在 Vue 组件中直接编写 `.scss` 文件或者导入 `.scss` 文件，那么就需要确保开发环境已经安装了相应的依赖包，并进行了必要的设置。 首先运行以下命令安装所需模块： ```bash npm install sass-loader node-sass --save-dev ``` 之后便可以直接在组件内部像这样操作： ```html <template> <div class="container"> <h1>标题文字</h1> </div> </template> <script> export default {}; </script> <style lang="scss" scoped> $primary-color: blue; .container h1 { font-size: 2em; color: $primary-color; } /* 如果有单独的 scss 文件也可以这么写 */ @import '@/styles/_variables.scss'; </style> ``` 这里展示了如何定义变量 `$primary-color` 并将其应用于 HTML 元素的颜色属性上[^5]。 --- #### 方法四：HTML `<link>` 标签静态链接 虽然不推荐这样做，但在某些特殊需求下仍然可以选择直接修改 `public/index.html` 文件并通过标准 HTML `<link>` 标记嵌套远程资源地址的方式完成加载工作。 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- 添加此行 --> <link rel="stylesheet" href="/path/to/your/style.css"> </head> <body> ... </body> </html> ``` 不过要注意，由于现代框架提倡按需打包策略，因此除非必要情况外一般应避免采用此类做法[^2]。 --- ### 总结 以上就是关于 **Vue3 如何引入外部 CSS 文件** 的四种主要途径介绍。开发者可以根据实际业务逻辑以及个人偏好选取最适合自己的方案实施部署。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值