1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Vue 单文件模板中覆盖引入库 CSS 样式

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

时间:2022-10-06 07:49:44

相关推荐

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

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

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

为什么我们可以这样能解决呢?我们来看一下标准便可一窥其貌

文档中已经明确表示

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

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

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

所以我们以 SCSS 为例:

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

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

实例如图

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。