美文网首页
Vue 单文件模板中覆盖引入库 CSS 样式

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

作者: Clancy_Lin | 来源:发表于2019-05-24 15:27 被阅读0次

在开发过程中经常会遇到所用 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

相关文章

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

    在开发过程中经常会遇到所用 UI 库不能满足业务需求需要个性化定制的需求,然而由于各 UI 库通过 JS 的方式引...

  • .vue文件中引入单独的css文件

    问题描述 单页面应用中一般把样式文件写在.vue文件中,如下: // 如果引入单独的css样式文件,也实现模块化(...

  • Vue的工具篇-单文件组件

    Vue单文件组件缩写为SFC,又名.vue文件,是一种特殊的文件格式 它将Vue组件的模板、逻辑与样式封装在单个....

  • vue性能优化

    Vue 应用运行时性能优化措施 引入生产环境的 Vue 文件 使用单文件组件预编译模板 提取组件的 CSS 到单独...

  • CSS引入问题

    CSS使用问题 在单文件组件中,编写的样式可以保证只对当前组件的模板具有效果,添加scoped属性到style标签...

  • 修改vant组件样式无法显示的问题

    .vue文件中的style标签内因为scoped的原因,样式只对.vue文件中的template模板标签内的结构有...

  • HTML 5_CSS 3_JavaScript讲义(五)-级联样

    (1).CSS样式单基本使用 1.引入外部样式文件: 2.导入外部样式单: @import "outer.css"...

  • Vue引入css文件

    不想在vue文件中写CSS或者CSS太长,不适合在vue中写,就在需要引入的地方引入css样式 如果引入的是全局样...

  • webpack#2.0结合vue-cli搭建开发环境

    搭建 让.vue文件中解析lang="less" 使用vue-router 结合animate.css 做动画 引...

  • vue-cli

    === 单文件组件结合webpack处理单文件组件配置webpack相关loader使用vue文件创建vue组件引...

网友评论

      本文标题:Vue 单文件模板中覆盖引入库 CSS 样式

      本文链接:https://www.haomeiwen.com/subject/ugogzqtx.html