字体的引用
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: {
// 配置全局的 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>