Nuxt3【详解】资源引用 vs 添加样式（2024最新版）

字体的引用

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

3. 在页面中使用

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

assets 中的资源

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

public 中的资源

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

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

组件中导入样式

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

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

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

使用 CSS 模块

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

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

样式预处理器

如使用 SCSS、Sass、Less 或 Stylus 等

1. 安装对应的样式预处理器

npm install sass

2. assets 中书写样式
   如 assets/scss/main.scss
3. 页面中导入

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

第三方的样式包

如 animate.css
3. 安装样式包

npm install animate.css

4. 页面中导入

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

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

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

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

配置全局样式

nuxt.config.ts 中

css 配置

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

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'
        }
      }
    }
  }
})

修改 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' }]
    }
}})

动态添加样式表 useHead

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

使用 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">')
  })
})

使用 PostCSS

Nuxt 内置了 postcss

nuxt.config.ts 中配置 postcss

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

组件中使用

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