[笔记] 当在 Vue 中不得不用全局样式时...

摘要：有时候基于的单文件组件开发项目时不得不使用全局样式这时有一些需要注意的地方当遇到需要使用全局样式时下列几种情况样式在项目各处均有使用样式只在当前组件内的上使用样式需要应用到当前组件的外部下面详细记录一下需要注意的问题样式在项目各处均有使用如

有时候基于 Vue 的单文件组件开发项目时, 不得不使用全局样式, 这时有一些需要注意的地方.

当遇到需要使用全局样式时, 下列几种情况

样式在项目各处均有使用;

样式只在当前组件内的 DOM 上使用;

样式需要应用到当前组件 DOM 的外部 DOM;

下面详细记录一下需要注意的问题:

如果样式需要在项目各处均有使用, 例如: reset.css, tiny-trim.css 等等.
这时推荐在项目入口文件中直接导入样式文件:

// src/main.js
import "tiny-trim.css"
import "asset/reset.css"
import "asset/global.css"

当然, 也可以在顶层组件中没有设置 scoped 属性的 style 标签中导入:

@import url(asset/reset.css);
@import url(asset/global.css);

当使用一些第三方 UI 库时, 有一些 UI 库生成的 DOM 在 template 中并不能直接添加 class 或 style 来修改第三方 UI 库的组件样式, 这时我们可以通过当前组件没有 scoped 属性的 style 标签来添加全局样式.

但此时需要考虑一些问题:

这个样式应该只影响当前组件内第三方 UI 库渲染出来的 DOM

因为 DOM 不在 template 标签里 (DOM 由第三方 UI 库的 JS 在浏览器加载时构建或在编译打包过程中生成), 不能直接设置 class 或 style 来修改样式, 故只能使用没有 scoped 属性的 style 标签

可以看出两点是有一定矛盾的. 不过可以采用如下方法解决或缓解:

为当前组件根元素设置自定义 data 属性