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;
}
- 在页面中使用
<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 等
- 安装对应的样式预处理器
npm install sass
- assets 中书写样式
如 assets/scss/main.scss - 页面中导入
<style lang="scss">
@use "~/assets/scss/main.scss";
</style>
第三方的样式包
如 animate.css
3. 安装样式包
npm install animate.css
- 页面中导入
<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: {// 配置全局的 scssscss: {additionalData: '@use "@/assets/_colors.scss" as *;'},// 配置全局的 sasssass: {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>