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

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

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

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

文档中已经明确表示

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

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

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

所以我们以 SCSS 为例：

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

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

实例如图

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

Vue 单文件模板中覆盖引入库 CSS 样式相关推荐

vue 单文件组件中，输入template 按 tab 键不能自动补全标签的解决办法
1. 操作步骤选择: 文件 ⇒\Rightarrow⇒ 首选项 ⇒\Rightarrow⇒ 设置 ⇒\Rightarrow⇒ 搜索 emmet,选择编辑 setting.json 添加如下代码: ...
VSCode环境下配置ESLint 对Vue单文件的检测
本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持. ESLint 安装 1.在工程根目录下,安装eslint及初始化 $ npm install e ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
vue单文件自定义指令的封装
vue单文件自定义指令的封装第一步(封装一个js文件) // 暴露并配置指令功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
Goland中在文件模板中为go文件添加个人声明
Goland中在文件模板中为go文件添加个人声明打开文件模板菜单修改内容如下: 效果演示打开文件模板菜单从goland左上角依次点击: [File] – [Settings] – [Edito ...
vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }&qu ...

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

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

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

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

文档中已经明确表示

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

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

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

所以我们以 SCSS 为例：

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

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

实例如图

Vue 单文件模板中覆盖引入库 CSS 样式相关推荐

最新文章

热门文章