Vue 单文件模板中覆盖引入库 CSS 样式

在开发过程中经常会遇到所用 UI 库不能满足业务需求需要个性化定制的需求，然而由于各 UI 库通过 JS 的方式引入的方式所在位置要后于单文件模板中的 CSS 样式。

我们使用 import 一个外部的 CSS 文件对其进行覆盖的方式进行解决：

image.png

为什么我们可以这样能解决呢？

我们来看一下标准便可一窥其貌

文档中已经明确表示

通过 import 引入的文件会像 function 一样引入，也即通过异步引入，此时引入的 CSS 文件的位置便可通过相对于库的 import 顺序进行控制

在使用该种方法进行覆盖时要注意控制作用域

在使用公司脚手架进行搭建的 vue 模板中默认配置了 SCSS 的编译支持

所以我们以 SCSS 为例：

image.png

这样使用时会在全局应用这个样式，因为是后引入的所以容易引发难以预测的后果

我们在使用这个技巧时通常通过父级嵌套，将其作用域限定于某一组件内

实例如图

image2019-5-23_8-54-33.png

这时我们就能将作用域限定在 .eleTop-container 包裹的范围内啦~

最后的最后

日常求个赞

image.png