在進行Nuxt開發(fā)時,我們可能需要在所有頁面中全局引用一些 CSS 樣式,以確保整個應用的風格風格統一。那么,如何在 Nuxt 中全局引用 CSS 呢?
通常,我們可以在 Nuxt 應用的根目錄下創(chuàng)建一個名為“app.css”的文件,在其中編寫所有需要應用的樣式。接著,在 nuxt.config.js 文件的 css 配置項中引入這個 app.css 文件,代碼如下:
module.exports = {
/* 其他配置項 */
css: [
'~/app.css'
]
}
以上配置將會在所有頁面中引入 app.css 文件。如果我們需要在某個頁面中引入單獨的樣式文件,那么可以通過在頁面組件的頭部 meta 選項中添加 link 標簽來完成:
上面的代碼中,我們通過 head 中的 link 字段來引入需要的樣式文件,當然了,我們也可以在 link 標簽中設置 crossorigin、integrity 等屬性,以提高頁面安全性。在沒有使用 scope 屬性的情況下,頁面中的樣式只會應用于當前頁面,而不會影響全局樣式;如果想要應用于整個應用,我們可以移除 scope 屬性即可。