vue 组件不受全局样式影响_组件库引入全局样式lib/style/index.css,会污染全局基础样式...

最新推荐文章于 2021-08-04 02:11:59 发布
最新推荐文章于 2021-08-04 02:11:59 发布
阅读量533 收藏
点赞数
文章标签： vue 组件不受全局样式影响
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39547596/article/details/111913184
版权

I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.14

Environment

macos 10.14.6，chrome76.0.3809.100(正式版本)，vue 2.6

Reproduction link

Steps to reproduce

在chrome extension 插件开发中使用ant-design-vue组件库。

采用了按需加载的引入方式。

但是按需加载还是会引入ant-design-vue代码中style文件夹中的index.css。

该文件中包含全局的一些基本样式，会影响到正常界面的显示。

按需加载的时候能不能限制ant-design-vue样式的作用域。

ant-design-vue中style文件夹中的index.css文件截图

百度页面样式覆盖截图：

What is expected?

引入lib/style/index.css 文件不污染全局样式

What is actually happening?

开发的chrome extension 插件在浏览网页过程中，会影响网页的样式

#1085 被关闭的带图片的issue地址

weixin_39547596
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Ant-Design-vue(antdv)单独设置某个组件的样式,不污染全局(less预处理器)
qq_42292211的博客
09-17 2012
以表格(table)为例,我想只更改某个界面的表格头部颜色或者表格行间隙,行颜色等 一.加外层容器 首先找到此组件最近的一个外层容器,下面是一个最简单的示例 <div class='main-container'> <a-table/> </div> 此时table的外层容器为main-container,要想设置table内部的样式,只需要如下 .main-container{ //表格头部颜色 /deep/...
vue 组件不受全局样式影响_Vue 组件之间样式冲突
weixin_27021789的博客
01-30 4281
Vue 组件之间样式冲突vue 组件化，各组件内都可以在 style 部分写样式，这些样式却不是相互独立的，最终组合在一起，难免就会产生样式的污染。首先来看一下两个 vue 组件代码：1.ParentTestStyle.vue父组件控件：testParentStyle样式穿透子组件控件：import childStyle from "./ChildTestStyle";export default...
在vue-cli模式下，单个vue组件引入外部框架的css，而不干扰其他组件的方式
b453293486的博客
08-18 5226
有时会有在单独组件内引入外部框架的需要，而又不想干扰其他组件。 放在main里,css会影响到所有组件。 放到index.html同样会有影响。 所以要放到单组件的style scoped里 你可以 单独放在一个style里面：是有效的 &lt;style scoped&gt; .f6f6f6{ height:100px; backgr...
scope与/deep/深度选择器
weixin_43841308的博客
10-20 659
使用例子：element-ui的input无法改变高度，在设置.el-input__inner上添加深度选择器。 关键点：css、vue
vue 组件不受全局样式影响_Vue——解决使用第三方组件库时无法修改默认样式的问题（使用 /deep/ ）...
weixin_32475641的博客
12-23 1326
最近在开发一个基于Vue的后台管理系统，其中使用了element-ui第三方ui组件库。使用过组件库的人都知道，第三方组件往往会有一些默认的样式，而有些又是我们想要改变的。一、基础(了解 的 scoped 属性)在编写Vue代码过程中，为了不让父组件相同样选择器名称设置的样式影响到子组件，我们往往会给 标签设置 scoped 属性。但是如果设置了scoped属性，在该组件内的 Css 就只能作...
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
10-14
在Vue.js框架中，创建全局组件是提高代码复用性和简化项目结构的一种有效方式。当一个组件在多个地方被频繁使用时，将其封装为全局组件可以避免在每个使用它的组件中重复导入。Vue.use()方法则常用于安装自定义插件...
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element); Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` **App.vue** - 这是...
vue element 项目默认css文件 style
最新发布
01-02
一个标准的Vue Element项目会有一个默认的CSS文件，通常命名为`styles`，这个文件用于存放全局样式或者项目的基础样式。`styles`文件一般位于`src`目录下，这是Vue项目的源代码根目录，包含组件、路由、公共样式、...
浅谈vue.js导入css库(elementUi)的方法
10-18
import 'element-ui/lib/theme-default/index.css'; Vue.use(ElementUI); 上述代码中，首先通过import语句引入了Element UI的核心模块，并且引入了Element UI默认主题的CSS样式文件。最后，通过Vue.use()方法将...
vue 组件不受全局样式影响_vue 子组件的根节点 样式 会受到父组件的影响，应该如何比较优雅的避免这个情况？...
weixin_31174767的博客
12-23 957
父组件:.wrap {height: 100%;}子组件:上面的代码 子组件的 根节点元素( class 为 wrap )也会受到影响。引用 Vue-Loader 文档的说明：Child Component Root ElementsWith scoped, the parent component's styles will not leak into child components. How...
vue不推荐用全局变量_为什么说 Vue 中不建议用 index 作为 key？（diff 算法详解）...
weixin_36071064的博客
01-31 362
前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<li>1li><li>2li>ul>那么它的 vnode 也就是虚拟 dom 节点大概是这样的。{tag:'ul',children:[{tag:'li',ch...
关于ant-design按需导入后全局样式与自定义样式冲突的问题
Hanah21的博客
03-23 1026
关于ant-design按需导入后全局样式与自定义样式冲突的问题 这是一个笨法子，之前自己用antdesign写东西，刚开始直接全量引入了，后来改成按需导入发现我的全局样式失效了(主要是一些简单的全局，内外间距0，高度100等等)。 查了一下发现这个问题还很棘手，因为官方好像也没解决这个问题，因为按需引入组件的时候，ant的样式会自动插入到body标签里，所以优先级还很高。找来找去也只找到了用webpack的插件 normal-module-replacement-plugin，可以替换制定文件为另一个
react中使用antd影响全局样式的问题
weixin_43297321的博客
08-26 2319
如果在react脚手架中使用 ant design 这个UI框架的话，需要引入它的样式： import 'antd/dist/antd.css'; 不过这会影响我们index.js里面全局样式。 一般按antd的文档走是不是发现这个问题的，不过我半路出家，直接把antd的样式依赖写在index.css下面，导致我在index.css安排的全局样式被覆盖了，我也是后面才改过来的。 试了两种方法，调整包引入顺序以及重置样式包裹根组件< App />标签。 第一种：调整包引入顺序，将index.cs
vue style动态绑定样式_vue: 组件实例 局部style样式scoped
weixin_39539764的博客
11-25 672
复习组件化开发，组件的语义化，和样式的基础使用如果我们要写这样一个页面，我们可以分为四个部分。头部header.vue尾部footer.vue内容部分: 服务器列表部分server.vue和服务器描述部分serverDetail.vue是使用了bootstrap来做的样式，所有先在public下的index.html中引入bootstarp树立目录结构，把所有组件放在components文件夹下为...
vue中引入css文件
weixin_30432007的博客
09-21 1300
两种方式引入css文件，一种是直接在main.js中引入，即下面这种写法： import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中，不适用于通过网址访问的方式引入，会报错。偶试着引入Font Awesome，结果报错： import "http://netdna.bootstrapcdn.com/fo...
vue style.css,vue * !!vue-style-loader!css-loader?
weixin_30047059的博客
08-04 487
!!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-2964abc9","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap"...
vue-cli中引入antd样式——报错Inline JavaScript is not enabled
jiongshaopeng的博客
03-25 978
HTML-CSS小知识——绝对定位使用细节绝对定位 绝对定位 absolute定位时，是相对于第一个的祖先标签；其中需注意的是，定位的时候是相对于该元素padding+content的，不包扣border。 举例代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib
在Vue中，如何用lib模式发布自己的库代码
阿嚏乱码的地方
06-29 4148
使用lib模式打包 在vue-cli官网中有指出如何使用lib模式构建代码。 当你运行vue-cli-service build时，你可以通过--target选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。 lib模式默认是不含有Vue的，若原代码中有vue，则会将原代码中的vue删除。 注意对 Vue 的依赖 在库模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式...
vue 组件不受全局样式影响_vue 修改第三方样式库并不影响别的页面
weixin_42121725的博客
12-23 3442
1.需要场景当 在vue中 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，防止样式的全局污染，尤其是在我们引用第三方库的，可能它们没有达到我们的要求，我们需要去修改第三方的样式，如果我们不加scoped的时候可能在别的页面也会修改我们的样式。2.解决方案方法1(需要大量修改样式)：我们知道在一个vue的页面中，可以使用多个style标签来设置多个样式，我们将第一...
vue怎么在单个组件中修改全局样式
03-13
可以使用Vue的CSS作用域来修改单个组件的样式，而不影响全局样式。具体做法是在组件的<style>标签中添加scoped属性，例如： <style scoped> .my-class { color: red; } </style> 这样定义的样式只会作用于当前组件内部，不会影响到全局样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值