样式设置

Nuxt 在样式设置方面具有高度的灵活性。您可以编写自己的样式或引用本地和外部样式表。您可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为您的应用程序设置样式。

本地样式表

如果您正在编写本地样式表，自然的放置位置是 assets/ 目录。

在组件中导入

您可以直接在页面、布局和组件中导入样式表。您可以使用 JavaScript 导入，或使用 CSS @import 语句。

pages/index.vue

<script>
// 使用静态导入以兼容服务端
import '~/assets/css/first.css'

// 注意：动态导入在服务端不兼容
import('~/assets/css/first.css')
</script>

<style>
@import url("~/assets/css/second.css");
</style>

样式表会内联在 Nuxt 渲染的 HTML 中。

CSS 属性

您还可以在 Nuxt 配置中使用 css 属性。样式表的自然位置是 assets/ 目录。然后您可以引用其路径，Nuxt 会将其包含在您的应用程序的所有页面中。

nuxt.config.ts

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

样式表会内联在 Nuxt 渲染的 HTML 中，全球注入并出现在所有页面中。

使用字体

将您的本地字体文件放在 ~/public/ 目录中，例如放在 ~/public/fonts。然后您可以在样式表中使用 url() 引用它们。

assets/css/main.css

@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

然后在您的样式表、页面或组件中按名称引用您的字体：

<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>

通过 NPM 分发的样式表

您还可以引用通过 npm 分发的样式表。我们以流行的 animate.css 库为例。

npm install animate.css

然后您可以直接在页面、布局和组件中引用它：

app.vue

<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

该包也可以在 Nuxt 配置的 css 属性中作为字符串引用。

nuxt.config.ts

export default defineNuxtConfig({
  css: ['animate.css']
})

外部样式表

您可以通过在 nuxt.config 文件的 head 部分添加链接元素来将外部样式表包含在您的应用程序中。您可以通过不同的方法实现此结果。注意，本地样式表也可以通过这种方式包括在内。

您可以通过 Nuxt 配置的 app.head 属性来操作 head：

nuxt.config.ts

export default defineNuxtConfig
({
  app
: {
    head
: {
      link
: [{ rel
: 'stylesheet', href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
  }
})

动态添加样式表

您可以使用 useHead 组合以动态设置代码中的 head 中的值。

Read more in Docs > API > Composables > Use Head.

useHead
({
  link
: [{ rel
: 'stylesheet', href
: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})

Nuxt 在后台使用 unhead，您可以在这里参考其完整文档。

使用 Nitro 插件修改渲染的 Head

如果您需要更多的控制，您可以通过钩子拦截渲染的 HTML 并以编程方式修改 head。

在 ~/server/plugins/my-plugin.ts 中创建一个插件，如下所示：

server/plugins/my-plugin.ts

export default defineNitroPlugin
((nitro
) => {
  nitro
.hooks.hook('render:html', (html
) => {
    html
.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
  })
})

外部样式表是渲染阻塞资源：它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页渲染时间更长。您可以在 web.dev 阅读更多相关内容。

使用预处理器

要使用 like SCSS、Sass、Less 或 Stylus，首先需安装它。

npm install -D sass

编写样式表的自然位置是 assets 目录。然后，您可以在 app.vue（或布局文件）中使用您的预处理器语法导入源文件。

pages/app.vue

<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

或者，您可以使用 Nuxt 配置的 css 属性。

nuxt.config.ts

export default defineNuxtConfig
({
  css
: ['~/assets/scss/main.scss']
})

在这两种情况下，编译后的样式表将被内联在 Nuxt 渲染的 HTML 中。

如果您需要在预处理文件中注入代码，例如带有颜色变量的 sass partial，您可以通过 vite preprocessors options 来做到。

在您的 assets 目录中创建一些部分：

$primary: #49240F;
$secondary: #E4A79D;

然后在您的 nuxt.config 中：

export default defineNuxtConfig
({
  vite
: {
    css
: {
      preprocessorOptions
: {
        scss
: {
          additionalData
: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})

Nuxt 默认使用 Vite。如果您希望使用 webpack，可以参考每个预处理器加载器文档。

单文件组件 (SFC) 样式

Vue 和 SFC 的一个最棒的地方是它在自然处理样式方面的优越性。您可以在组件文件的样式块中直接编写 CSS 或预处理器代码，因此您将获得极佳的开发体验，而无需使用像 CSS-in-JS 这样的工具。不过，如果您希望使用 CSS-in-JS，您可以找到支持它的第三方库和模块，例如 pinceau。

您可以参考 Vue 文档以获取关于在 SFC 中样式组件的全面参考。

类和样式绑定

您可以利用 Vue SFC 特性使用类和样式属性为您的组件设置样式。

<script setup lang="ts">
const isActive = ref(true)
const hasError = ref(false)
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>
</template>

请参考 Vue 文档以获取更多信息。

使用 `v-bind` 的动态样式

您可以在样式块中引用 JavaScript 变量和表达式，使用 v-bind 函数。绑定是动态的，这意味着如果变量值更改，样式将更新。

<script setup lang="ts">
const color = ref("red")
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
.text {
  color: v-bind(color);
}
</style>

Scoped 样式

scoped 属性允许您单独为组件设置样式。使用该属性声明的样式仅适用于此组件。

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

CSS Modules

您可以使用 CSS Modules 和 module 属性。通过注入的 $style 变量访问它。

<template>
  <p :class="$style.red">这应该是红色</p>
</template>

<style module>
.red {
  color: red;
}
</style>

预处理器支持

SFC 样式块支持预处理器语法。Vite 内置支持 .scss、.sass、.less、.styl 和 .stylus 文件，无需配置。您只需先安装它们，它们将在 SFC 中通过 lang 属性直接可用。

<style lang="scss">
  /* 在这里编写 scss */
</style>

您可以参考 Vite CSS 文档和 @vitejs/plugin-vue 文档。对于 webpack 用户，请参考 vue loader 文档。

使用 PostCSS

Nuxt 内置了 postcss。您可以在 nuxt.config 文件中进行配置。

nuxt.config.ts

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

为了在 SFC 中实现合适的语法高亮，您可以使用 postcss lang 属性。

<style lang="postcss">
  /* 在这里编写 postcss */
</style>

默认情况下，Nuxt 已预配置以下插件：

postcss-import：改善 @import 规则
postcss-url：转换 url() 声明
autoprefixer：自动添加供应商前缀
cssnano：压缩和清理

利用布局实现多样式

如果您需要完全不同地为应用程序的不同部分设置样式，可以使用布局。为不同的布局使用不同的样式。

<template>
  <div class="default-layout">
    <h1>默认布局</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>

Read more in Docs > Guide > Directory Structure > Layouts.

第三方库和模块

Nuxt 在样式设置方面没有固定的看法，提供了多种选择。您可以使用您想要的任何样式工具，如流行的库 UnoCSS 或 Tailwind CSS。

社区和 Nuxt 团队开发了很多 Nuxt 模块以简化集成。您可以在网站的模块部分中发现它们。以下是一些帮助您入门的模块：

UnoCSS: 即时按需原子 CSS 引擎
Tailwind CSS: 工具优先的 CSS 框架
Fontaine: 字体度量回退
Pinceau: 可适应的样式框架
Nuxt UI: 现代 Web 应用程序的 UI 库
Panda CSS: 在构建时生成原子 CSS 的 CSS-in-JS 引擎

Nuxt 模块提供了很好的开发者体验，但请记住，如果您最喜欢的工具没有模块，并不意味着您不能在 Nuxt 中使用它！您可以为自己的项目配置它。根据工具的不同，您可能需要使用 Nuxt 插件和/或创建自己的模块。如果您这样做，请与社区分享！

使用 CDN，确保文件离您的用户更近
压缩您的资产，理想情况下使用 Brotli
使用 HTTP2/HTTP3 进行交付
将您的资产托管在同一域名下（不要使用不同的子域）

如果您使用现代平台，如 Cloudflare、Netlify 或 Vercel，大多数这些事情应该会自动为您完成。您可以在 web.dev 上找到 LCP 优化指南。

如果 Nuxt 已将所有 CSS 内联，您可以（实验性地）完全停止在渲染的 HTML 中引用外部 CSS 文件。您可以通过一个钩子实现这一点，该钩子可以放在模块中，或放在您的 Nuxt 配置文件中。

nuxt.config.ts

export default defineNuxtConfig({
  hooks: {
    'build:manifest': (manifest) => {
      // 找到应用程序条目，css 列表
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // 从数组末尾开始，倒着向前进行
        for (let i = css.length - 1; i >= 0; i--) {
          // 如果以 'entry' 开头，便从列表中移除
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})

资源

Nuxt 提供了两种处理资源的选项。

路由

Nuxt 的文件系统路由为 pages/ 目录中的每个文件创建一个路由。

本地样式表

在组件中导入

CSS 属性

使用字体

通过 NPM 分发的样式表

外部样式表

动态添加样式表

使用 Nitro 插件修改渲染的 Head

使用预处理器

单文件组件 (SFC) 样式

类和样式绑定

使用 `v-bind` 的动态样式

Scoped 样式

CSS Modules

预处理器支持

使用 PostCSS

利用布局实现多样式

第三方库和模块

轻松加载网络字体

高级

过渡效果

字体高级优化

LCP 高级优化