样式

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

本地样式表

如果您正在编写本地样式表，自然应该将它们放在 assets/ 目录。

在组件中导入

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

<script>
// Use a static import for server-side compatibility
import '~/assets/css/first.css'

// Caution: Dynamic imports are not server-side compatible
import('~/assets/css/first.css')
</script>

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

CSS 属性

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

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

使用字体

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

@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

yarn add animate.css

pnpm install animate.css

bun install animate.css

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

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

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

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

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

外部样式表

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

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

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

动态添加样式表

您可以使用 useHead composable 在您的代码中动态设置 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 中创建一个插件，如下所示：

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 上阅读更多相关信息。

使用预处理器

要使用像 SCSS、Sass、Less 或 Stylus 这样的预处理器，请先安装它。

npm install -D sass

npm install -D less

npm install -D stylus

在 Nuxt 3 中，放置样式表的最佳位置是 assets 目录。然后，你可以在 app.vue 文件（或你的布局文件中）使用预处理器的语法导入这些源文件。

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

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

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

如果您需要在预处理的文件中注入代码，例如包含颜色变量的 Sass partial，您可以使用 Vite 的 preprocessors options 来实现。

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

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

$primary: #49240F
$secondary: #E4A79D

然后在您的 nuxt.config 中：

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

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

Nuxt 默认使用 Vite。如果您希望使用 webpack，请参考每个预处理器 loader 的 文档。

预处理器 Workers (实验性)

Vite 提供了一个 实验性选项，可以加速预处理器的使用。

您可以在您的 nuxt.config 中启用它：

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true // number of CPUs minus 1
    }
  }
})

单文件组件 (SFC) 样式

Vue 和 SFC 最好的特性之一就是它在处理样式方面非常出色。您可以直接在组件文件的 style 块中编写 CSS 或预处理器代码，因此您将拥有出色的开发体验，而无需使用像 CSS-in-JS 这样的东西。但是，如果您希望使用 CSS-in-JS，您可以找到支持它的第三方库和模块，例如 pinceau。

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

类和样式绑定

您可以利用 Vue SFC 的特性，使用 class 和 style 属性来设置组件的样式。

<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>

<script setup lang="ts">
const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))
</script>

<template>
  <div :class="classObject"></div>
</template>

<script setup lang="ts">
const isActive = ref(true)
const errorClass = ref('text-danger')
</script>

<template>
  <div :class="[{ active: isActive }, errorClass]"></div>
</template>

<script setup lang="ts">
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({ color: 'red', fontSize: '13px' })
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <div :style="[baseStyles, overridingStyles]"></div>
  <div :style="styleObject"></div>
</template>

有关更多信息，请参阅 Vue 文档。

使用 v-bind 的动态样式

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

<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

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

<template>
  <p :class="$style.red">This should be red</p>
</template>

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

预处理器支持

SFC 样式块支持预处理器的语法。Vite 内置支持 .scss, .sass, .less, .styl 和 .stylus 文件，无需配置。您只需要先安装它们，然后就可以直接在带有 lang 属性的 SFC 中使用它们。

<style lang="scss">
  /* Write scss here */
</style>

<style lang="sass">
  /* Write sass here */
</style>

<style lang="less">
  /* Write less here */
</style>

<style lang="stylus">
  /* Write stylus here */
</style>

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

使用 PostCSS

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

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

为了在 SFC 中获得正确的语法高亮，您可以使用 postcss 的 lang 属性。

<style lang="postcss">
  /* Write postcss here */
</style>

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

• postcss-import：改进 @import 规则
• postcss-url：转换 url() 语句
• autoprefixer：自动添加供应商前缀
• cssnano：缩小和清除

利用布局实现多种样式

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

<template>
  <div class="default-layout">
    <h1>Default Layout</h1>
    <slot />
  </div>
</template>

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

第三方库和模块

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 插件 和/或 创建自己的模块。如果您这样做，请与 社区 分享！

轻松加载 Webfonts

您可以使用 Nuxt Google Fonts 模块 加载 Google Fonts。

如果您使用的是 UnoCSS，请注意它带有一个 web fonts presets，可以方便地从包括 Google Fonts 在内的常见提供商加载字体。

高级

过渡

Nuxt 附带了与 Vue 相同的 <Transition> 元素，并且还支持实验性的 View Transitions API。

字体高级优化

我们建议使用 Fontaine 来减少您的 CLS。如果您需要更高级的功能，请考虑创建一个 Nuxt 模块来扩展构建过程或 Nuxt 运行时。

LCP 高级优化

您可以执行以下操作来加速全局 CSS 文件的下载：

• 使用 CDN，使文件在物理上更靠近您的用户
• 压缩您的资源，最好使用 Brotli
• 使用 HTTP2/HTTP3 进行传输
• 将您的资源托管在同一域名下（不要使用不同的子域名）

如果您使用 Cloudflare、Netlify 或 Vercel 等现代平台，这些大部分操作都应该自动为您完成。 您可以在 web.dev 上找到 LCP 优化指南。

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

export default defineNuxtConfig({
  hooks: {
    // 监听 Nuxt 构建清单生成事件
    'build:manifest': (manifest) => {
      // find the app entry, css list
      const css = Object.values(manifest).find(options => options.isEntry)?.css
      if (css) {
        // start from the end of the array and go to the beginning
        for (let i = css.length - 1; i >= 0; i--) {
          // if it starts with 'entry', remove it from the list，移除匹配的 CSS 文件
          if (css[i].startsWith('entry')) css.splice(i, 1)
        }
      }
    },
  },
})