字体的引用
1.本地字体放在 public 中
2. 在 css 文件中定义 assets/css/main.css
- 在页面中使用
assets 中的资源
public 中的资源
在 public/img/ 目录中引用一个图像文件
组件中导入样式
使用 CSS 模块
样式预处理器
如使用 SCSS、Sass、Less 或 Stylus 等
- 安装对应的样式预处理器
- assets 中书写样式
如 assets/scss/main.scss - 页面中导入
第三方的样式包
如 animate.css
3. 安装样式包
- 页面中导入
也可配置成全局样式 (nuxt.config.ts 中)
配置全局样式
nuxt.config.ts 中
css 配置
vite 配置 css
修改 head
app.head 配置
动态添加样式表 useHead
使用 Nitro 插件修改 head
创建一个插件,放在 ~/server/plugins/my-plugin.ts 中
使用 PostCSS
Nuxt 内置了 postcss
nuxt.config.ts 中配置 postcss
组件中使用