【Nuxt3系列五】处理样式

官方教程

官方提供了很多种样式的处理方法。但是我本人，更加偏爱UnoCss或者是tailwind Css这样的框架。

所以本节只是简单的过一下官方的教程

本地样式表

可以直接import

<script>
// 静态导入，支持服务端
import '~/assets/css/first.css'

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

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

配置文件中配置css

这种方式也是全局导入的

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

字体的处理

字体一般推荐放在public/fonts中。可以在样式表中使用url()引入

@font-face {
  font-family: 'FarAwayGalaxy';
  src: url('/fonts/FarAwayGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

官方还有很多骚操作：

• 引入通过npm分发的css
• 全局引入外部样式表
• 动态在代码中，在head中引入样式表
• 使用Nitro插件修改渲染的head
• 使用SCSS、SASS之类的预处理
• 使用postcss

不一一说了，UnoCss真香。后面再说