字体的引用

1.本地字体放在 public 中
2. 在 css 文件中定义 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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  1. 在页面中使用
<style>
h1 {
  font-family: 'FarAwayGalaxy', sans-serif;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

assets 中的资源

<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
  • 1.

public 中的资源

在 public/img/ 目录中引用一个图像文件

<img src="/img/nuxt.png" alt="Discover Nuxt 3" />
  • 1.

组件中导入样式

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

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

<style>
@import url("~/assets/css/second.css");
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

使用 CSS 模块

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

<style module>
.red {
  color: red;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

样式预处理器

如使用 SCSS、Sass、Less 或 Stylus 等

  1. 安装对应的样式预处理器
npm install sass
  • 1.
  1. assets 中书写样式
    如 assets/scss/main.scss
  2. 页面中导入
<style lang="scss">
@use "~/assets/scss/main.scss";
</style>
  • 1.
  • 2.
  • 3.

第三方的样式包

如 animate.css
3. 安装样式包

npm install animate.css
  • 1.
  1. 页面中导入
<script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

也可配置成全局样式 （nuxt.config.ts 中）

export default defineNuxtConfig({
  css: ['animate.css']
})
  • 1.
  • 2.
  • 3.

配置全局样式

nuxt.config.ts 中

css 配置

// 配置全局的 css
export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})
  • 1.
  • 2.
  • 3.
  • 4.

vite 配置 css

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        // 配置全局的 scss
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        },
        // 配置全局的 sass
        sass: {
          additionalData: '@use "@/assets/_colors.sass" as *\n'
        }
      }
    }
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

修改 head

app.head 配置
export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
    }
}})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
动态添加样式表 useHead
useHead({
  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
})
  • 1.
  • 2.
  • 3.
使用 Nitro 插件修改 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">')
  })
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

使用 PostCSS

Nuxt 内置了 postcss

nuxt.config.ts 中配置 postcss

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {}
      "postcss-custom-media": {}
    }
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

组件中使用

<style lang="postcss">
  /* 在这里编写 stylus */
</style>
  • 1.
  • 2.
  • 3.