js覆盖less全局变量_Vue Element-ui 全局变量

和 Vue 配合最多的 ui 框架就是 element-ui 了，element-ui 有一套属于自己的样式。

而往往我们的 ui 同学会发挥自己的能力设计出或简洁或朴实或炫丽各种各样的设计稿，我们前端的工作就是实现它，尽可能还原到100%。

但是 ui 同学设计的和 element-ui 的默认样式存在些许差别，我们怎么修改呢？

说到这就到提及一点，每个 vue 组件内的 style 标签都会有一个 scoped 属性，它的作用就是让样式作用于当下的模块，不会影响其他模块同名的样式【举例：A组件有个名为cla的类，B组件也有一个cla的类，如果不加scoped，改变A的cla，B组件样式也会跟随变化。加上就不会跟随变化了】。

回到正题，我们用 button 举例。我们先看下 element-ui 的 button 样式

长得还挺漂亮的哈，如果 ui 同学给我们的设计稿所有按钮都是长方形非圆角的（类似第一种），我们需要每个按钮都要修改吗？显然不是

在 element-ui 的自定义主题中给我们提供了方法，虽然提供了方法，但是具体到修改某些样式的代码我们还是不清楚怎么写。

1）. 首先 npm 安装 element-ui 的依赖，然后在 main.js 中引入，并加上这个scss

2）. 找到 element 的默认配置 css 的文件，从中查看哪些变量可以修改，及修改的具体代码

node_modules / element-ui / packages / theme-chalk / src / common / var.scss

里面代码很多，700多行

3）. 找到我们想修改内容的代码，复制到你新建的 element-variables.scss 中

这样就能批量修改你想改变的样式了，而且不影响你组件内 scoped 的代码。

看到这里有人疑问了，它文件的 !default 是干什么的？ 这个东西是默认使用，如果你有修改就会覆盖掉它的默认，需要注意一点：要写在 红框代码 的上面才起作用。

这样就解决了批量的问题了，大功告成~

别高兴太早，有些页面是特殊化定制的样式，举例：所有页面的 button 都是非圆角，但是只有 A 组件的 button 要求5px 的圆角，怎么办？

有三种方法实现：

1）. 你刚才新建的 element-variables.scss 是一个全局的 scss 文件，你可以写在这里。但是不推荐，因为是全局文件，里面最好还是写一些全局的样式，如果有单独的有全局的很乱

2）. 我们知道每个 vue 组件内是可以写多个 style 标签的，那我们写两个，单独定制的 css 写在加 scoped 的 style 内，全局的写在不加 scoped 的 style 中也是可以实现的，但是也不太推荐，这样会引起全局污染互相影响。

3）. 使用 深度选择器，这样我们就能在组件内直接修改了，既不会引起全局污染也不会混乱。

深度选择器如何使用呢？

这个就是深度选择器的用法【.a >>> .b{} ： 注意三个箭头左右各有一个空格】

如果你的 css 语言使用的是 scss、less 或 stylus 等就这样写【.a /deep/ .b{}】

有的时候你使用了深度选择器但是样式还是没有修改，可能是权重的问题，加 !important 就好了【！前面要有空格，英文叹号】

我们无法直接在带有 scoped 的组件中直接修改第三方 ui 库的默认样式。

我们有时 F12 检查的时候发现有的样式比较奇怪，长这个样子

这个 [data-v-b554e15c] 这个是干嘛的？这个是 scoped 机制自动给类添加的，保证了唯一性，防止全局污染。这就是为什么你在不同组件起了个相同的名字也不会相互影响的原因。

感觉不错点个赞留个关注吧。都是实战经验的干货哦~

你之前碰到这种问题是怎么样解决的呢？或者有什么更好的方法，欢迎评论，一起交流进步~