样式化

在这个章节 学习如何为你的 Nuxt 添加样式

在样式化方面，Nuxt 非常灵活。你可以编写自己的样式，或者引用本地和外部样式表。 你可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为你的应用程序添加样式。

本地样式表

如果你正在编写本地样式表，将它们放在 assets/ 目录 是最自然的位置。

在组件中引入

你可以在页面、布局和组件中直接引入样式表。 你可以使用 JavaScript 的 import，或者使用 css 的 @import 语句

这里要注意 静态导入有服务器端兼容性，而动态导入没有

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

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

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

样式表将会被内联到Nuxt渲染的HTML中

全局加载 CSS

你还可以使用 Nuxt 配置中的 css 属性。 将你的样式表放在 assets/ 目录 是最自然的位置。然后你可以引用它的路径，Nuxt 将会将它包含在应用程序的所有页面中。

// nuxt.config.js
export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
});

• 如果是多个可以在后面继续写

export default defineNuxtConfig({
  css: ["normalize.css", "~/assets/css/main.css"],
});

样式表将被内联到 Nuxt 渲染的 HTML 中，全局注入并存在于所有页面中。

全局使用字体文件

将本地字体文件放在 ~/public/ 目录中，例如 ~/public/fonts。然后可以在样式表中使用 url() 引用它们。

/* assets/css/main.css 把这个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>

通过 NPM 来分发样式

你还可以引用通过 npm 分发的样式表。让我们以流行的 animate.css 库为例。

npm install animate.css -S

然后你可以直接在页面,布局和组件中引用它

<script>
  import "animate.css";
</script>

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

你还可以将该包作为字符串引用到 Nuxt 配置的 css 全局属性。

export default defineNuxtConfig({
  css: ["animate.css"],
});

外部样式表

全局(静态)

你可以通过在 nuxt.config 文件的 head 部分添加一个 link 元素来在应用程序中包含外部样式表。

你可以使用不同的方法来实现这个目标。注意，本地样式表也可以以这种方式包含。

你可以通过 Nuxt 配置的 app.head 属性来修改 head：

// nuxt.config.ts
  app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
    },
  },

• 可以设置 tdk

// nuxt.config.ts

  app: {
    head: {
      title: "Nuxt3的网站标题",
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
      meta: [
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { name: "description", content: "Nuxt 3 + Tailwind CSS" },
        { name: "keywords", content: "第一个测试Nuxt3" },
      ],
    },
  },

动态(可以页面里面改)

• 你可以在页面中使用 useHead 组合式函数在代码中动态设置 head 中的值。

动态加载 css,js 改变 tdk 等等

useHead({
  link: [
    {
      rel: "stylesheet",
      href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
    },
  ],
  title: "标题",
  meta: [
    { name: "description", content: "描述" },
    { name: "keywords", content: "关键词" },
  ],
});

使用预处理器

安装

要使用 SCSS、Sass、Less 或 Stylus 等预处理器，首先要安装它

npm install sass -D

导入

编写样式表的自然位置是 assets 目录。 然后，你可以使用你的预处理器的语法在你的 app.vue（或布局文件）中导入你的源文件。

• 组件里面导入

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

• 全局导入

/* assets/sass/variables.scss */
$primary: #49240F;
$secondary: #F0ECE3;

/* nuxt.config.ts中使用 */

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})