在开发过程中经常会遇到所用 UI 库不能满足业务需求需要个性化定制的需求,然而由于各 UI 库通过 JS 的方式引入的方式所在位置要后于单文件模板中的 CSS 样式。
我们使用 import 一个外部的 CSS 文件对其进行覆盖的方式进行解决:

为什么我们可以这样能解决呢?
我们来看一下标准便可一窥其貌
文档中已经明确表示
通过 import 引入的文件会像 function 一样引入,也即通过异步引入,此时引入的 CSS 文件的位置便可通过相对于库的 import 顺序进行控制
在使用该种方法进行覆盖时要注意控制作用域
在使用公司脚手架进行搭建的 vue 模板中默认配置了 SCSS 的编译支持
所以我们以 SCSS 为例:

这样使用时会在全局应用这个样式,因为是后引入的所以容易引发难以预测的后果
我们在使用这个技巧时通常通过父级嵌套,将其作用域限定于某一组件内
实例如图

这时我们就能将作用域限定在 .eleTop-container 包裹的范围内啦~
最后的最后
日常求个赞

网友评论