摘要：有時(shí)候基于的單文件組件開發(fā)項(xiàng)目時(shí)不得不使用全局樣式這時(shí)有一些需要注意的地方當(dāng)遇到需要使用全局樣式時(shí)下列幾種情況樣式在項(xiàng)目各處均有使用樣式只在當(dāng)前組件內(nèi)的上使用樣式需要應(yīng)用到當(dāng)前組件的外部下面詳細(xì)記錄一下需要注意的問(wèn)題樣式在項(xiàng)目各處均有使用如

有時(shí)候基于 Vue 的單文件組件開發(fā)項(xiàng)目時(shí), 不得不使用全局樣式, 這時(shí)有一些需要注意的地方.

當(dāng)遇到需要使用全局樣式時(shí), 下列幾種情況

樣式在項(xiàng)目各處均有使用;

樣式只在當(dāng)前組件內(nèi)的 DOM 上使用;

樣式需要應(yīng)用到當(dāng)前組件 DOM 的外部 DOM;

下面詳細(xì)記錄一下需要注意的問(wèn)題:

如果樣式需要在項(xiàng)目各處均有使用, 例如: reset.css, tiny-trim.css 等等.
這時(shí)推薦在項(xiàng)目入口文件中直接導(dǎo)入樣式文件:

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

當(dāng)然, 也可以在頂層組件中沒有設(shè)置 scoped 屬性的 style 標(biāo)簽中導(dǎo)入:

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

當(dāng)使用一些第三方 UI 庫(kù)時(shí), 有一些 UI 庫(kù)生成的 DOM 在 template 中并不能直接添加 class 或 style 來(lái)修改第三方 UI 庫(kù)的組件樣式, 這時(shí)我們可以通過(guò)當(dāng)前組件沒有 scoped 屬性的 style 標(biāo)簽來(lái)添加全局樣式.

但此時(shí)需要考慮一些問(wèn)題:

這個(gè)樣式應(yīng)該只影響當(dāng)前組件內(nèi)第三方 UI 庫(kù)渲染出來(lái)的 DOM

因?yàn)?DOM 不在 template 標(biāo)簽里 (DOM 由第三方 UI 庫(kù)的 JS 在瀏覽器加載時(shí)構(gòu)建或在編譯打包過(guò)程中生成), 不能直接設(shè)置 class 或 style 來(lái)修改樣式, 故只能使用沒有 scoped 屬性的 style 標(biāo)簽

可以看出兩點(diǎn)是有一定矛盾的. 不過(guò)可以采用如下方法解決或緩解:

為當(dāng)前組件根元素設(shè)置自定義 data 屬性