摘要：有時候基于的單文件組件開發項目時不得不使用全局樣式這時有一些需要注意的地方當遇到需要使用全局樣式時下列幾種情況樣式在項目各處均有使用樣式只在當前組件內的上使用樣式需要應用到當前組件的外部下面詳細記錄一下需要注意的問題樣式在項目各處均有使用如

有時候基于 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 屬性