Nuxt3项目中怎样在nuxt.config中优雅引入全局CSS？-css教程-PHP中文网

css数组是Nuxt 3中唯一推荐的全局CSS注入入口，需写入字符串路径如'~/assets/css/main.css'，顺序决定优先级，禁用@import，且必须启用extractCSS以确保静态部署样式不丢失。

nuxt3项目中怎样在nuxt.config中优雅引入全局css？

css 数组是唯一推荐的全局 CSS 注入入口

在 Nuxt 3 中，css 数组是官方明确支持、SSR 安全、构建可预测的全局样式引入方式。其他手段（如在 app.vue 里写、手动 import、或用 link 配置）要么破坏提取逻辑，要么导致 FOUC，要么无法服务端渲染样式。

它本质是告诉 Vite/Webpack：“这些样式文件必须参与构建，并注入到每个页面的中”。不是“加载”，而是“编译时合并 + 注入”。

css 数组只接受字符串路径，不支持对象、函数或动态表达式
路径必须能被 Vite 解析：推荐用 ~/assets/xxx.css 或 node_modules/xxx/dist/xxx.css
顺序即优先级：靠后的 CSS 规则会覆盖靠前的，重置类（如 reset.css）应放最前
不支持 @import 语句——那是 CSS 文件内部的事，塞进数组里会被当无效路径静默忽略

路径写错是 80% 样式不生效的根源

常见错误不是语法问题，而是路径解析失败，终端无报错但浏览器里根本没生成。

❌ '/assets/css/main.css' —— / 开头被当绝对 URL，Webpack 找不到本地文件
❌ 'static/css/main.css' —— static 目录不走构建流程，css 数组无法识别
❌ 'assets/css/main.css' —— 缺少 ~ 别名，Nuxt 不会自动补前缀，解析失败
✅ '~/assets/css/main.css' —— 正确，~ 默认指向 src/（即项目根目录）
✅ 'bootstrap/dist/css/bootstrap.min.css' —— 正确，Node.js 模块解析路径，无需 ~

如果用了 SCSS/Sass，路径写成 '~/assets/scss/main.scss' 即可，前提是已装 sass 和 sass-loader（Nuxt 3 默认支持）。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

CDN 或第三方 CSS 必须区分 SSR 场景

直接把 CDN 地址塞进 css 数组（如 'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css'）在开发时看似正常，但 SSR 下完全不会注入——服务端不执行网络请求，只客户端加载，必然 FOUC。

✅ SSR 安全做法：下载到 assets/vendor/ 或 node_modules/ 后引用本地路径

⚠️ 若必须用 CDN（例如灰度环境切流量），改用 app.head.link 并加 hid 防重复：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.example.com/style.css', hid: 'cdn-style' }
      ]
    }
  }
})

注意：CDN 引入的样式无法参与 PostCSS 处理（如 autoprefixer），也绕过 HMR，改了要硬刷新

extractCSS 关闭会导致静态站样式丢失

当你运行 nuxi generate 输出静态站点时，build.extractCSS: true 是隐式依赖项。Nuxt 默认在 target: 'static' 下不启用 CSS 提取，结果就是所有 css 数组里的样式都不会被打包进 _nuxt/ 目录，页面空白或只有 HTML 结构。