import 引入样式污染全局

最新推荐文章于 2024-07-19 14:40:55 发布
最新推荐文章于 2024-07-19 14:40:55 发布
阅读量182 收藏 1
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45311650/article/details/134058318
版权

今天项目样式突然出问题了，然后排查问题，查看被修改的样式，但是当前页面并没有引入这个样式所在的文件，也是感到很奇怪，上网一查才知道，import引入，并不是直接引入css代码到页面，而是发起新的不带scoped的请求获得样式资源；因此，这种引用方式是全局的，从而引起全局污染，要想引用可以放到style里边。就像下边这样

<style src="@/assets/css/common.css"  scoped></style>

不想当秃头
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用@import 引入样式文件全局污染、使用scoped失效问题
编写博客，学习交流
11-30 839
在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。
vue 使用@import引入样式文件scoped无效造成全局样式污染
m0_73202019的博客
10-12 1813
样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。4.如果几个页面复用，那么在styles文件夹，里面创建个独立的scss，复用的代码写在这个文件里面。1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式。2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式。
Vue中外部引入样式污染全局的问题
iloveCodingC的博客
04-23 5429
vue中组件的引入外部样式时通常采用@import “样式文件路径” 比如 <style> @import "assets/css/base.css"; </style> 这样比较适用全局组件的初始化，或则适用于多个组件共用同一套样式， 全局组件样式初始化这个比较好理解，现在我们就来谈谈局部样式（单个组件与多个组件）污染的问题 单个组件污染的问题主要表现在< st...
如何解决vue中的组件样式冲突
若有所执，必有所成，心之所向，必显光芒
12-05 1653
组件样式冲突问题，导致组件之间样式冲突的根本原因，问题演示，通过设置scoped解决组件之间的冲突问题以及实现原理，使用deep修改子组件的样式，deep的应用场景
Vite创建的Vue3项目按需导入(自动导入) Element Plus 样式错误以及编译器报错的问题
Aiden的笔记本
02-27 2023
在Vite构建的Vue3项目中，可以通过官方推荐的自动导入的方法，方便地使用Element Plus，这样不需要在每一个Vue中手动import，而且基于按需导入的自动导入打包时效率也会更高。但是，不当的使用可能会导致ElMessage，ElNotification 等组件的样式丢失，不经过很好的配置，可能会出现虽然正确使用，但编译器报错的问题。这篇文章主要讲解如何正确引入Element Plus，以及解决上述两个常见的问题。
Vue中import 引入样式文件污染问题
suheivy的博客
11-23 4885
Vue中import 引入样式文件污染问题 一般情况下，我们引入外部样式文件的方法都采用以下这种： <style scoped lang="less"> @import './style.less'; </style> 在做公司项目的时候，全部都是按照这种方式引入的。今天运维找到我，说生产上发现某模块样式部分错乱，检查之后发现样式文件指向另一个模块，这就奇怪了，通常开发都会加scoped，不会去引入其他模块的样式，再看一眼，发现引入的是一个全局样式，也就是说本模块的样式被全局样式覆
Vue使用@import 引入样式文件全局污染问题
agua001的博客
12-10 4891
使用@import引入样式文件： <style scoped lang="less"> @import './style.less'; </style> 就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到， 这样的引入方式就会造成全局污染，即使你写了scoped。因为： @import并不是直接将目标文件的代码引入到使用的文件中来，而是发起了一个新的请求，获得相应资源，这个时候并没有加私有限制scoped，因此这种方式引入的文件将作
Vue中引入样式文件的方法
08-29
在模板文件中，我们可以使用 `import` 语句引入样式文件。但是，我们需要注意，如果不在入口 JS 文件中引入样式文件，而直接在模板文件中引入，那么将不会对 SCSS 文件进行解析，可能会引发问题。 在 Vue 中引入...
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，...
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
首先，让我们考虑以下场景：当使用 rem/vw 开发移动端时，我们定义了一个 px 转 rem 的函数，或者是网站配色的全局变量等，然后在工程中为每个 Vue 文件或者组件 @import ‘publicfilename.scss'，这将需要重复做...
Vue单页应用引用单独的样式文件的两种方式
08-27
Vue单页应用在开发中经常会遇到样式文件的引用问题，本文将从两个方面介绍Vue单页应用如何引用单独的样式文件，分别是使用main.js文件引入静态资源和在.vue文件中使用style标签引入样式文件。 使用main.js文件引入...
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
weixin_43303603的博客
07-15 404
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 1161
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 178
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 80
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
最新发布
2401_85639015的博客
07-19 806
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 975
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
uniapp引入less全局样式
05-19
在uniapp中引入less全局样式，需要先安装less-loader和less依赖： ``` npm install less-loader less --save-dev ``` 然后在项目根目录下创建一个`vue.config.js`文件，如果已存在则直接修改。 ``` module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } } } ``` 上面的配置中，我们将less的`javascriptEnabled`设置为`true`，以便在样式文件中使用JavaScript。 接着在`App.vue`中引入全局样式文件，可以是`.less`或`.css`文件： ``` <style lang="less"> @import "@/assets/styles/variables.less"; @import "@/assets/styles/mixins.less"; @import "@/assets/styles/global.less"; </style> ``` 这里我们通过`@import`来引入全局样式文件，`@`表示项目根目录。 最后，在样式文件中定义全局变量和混合器，例如： ``` @primary-color: #409EFF; .border-radius(@radius: 4px) { border-radius: @radius; } ``` 在需要使用的地方直接调用即可： ``` .button { background-color: @primary-color; .border-radius(); } ``` 以上就是在uniapp中引入less全局样式的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值