Nuxt3入门：样式的注入、定义和使用（第3节）

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

Nuxt 在样式方面非常灵活。可以自定义样式，或引用本地和外部样式表，或使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来设置应用程序的样式。

一、在组件中注入本地样式表

本地样式表放在 assets/ 目录下，可以使用 ~/assets/ 别名来引用它们。

你可以直接在页面、布局和组件中导入样式表，你可以使用 javascript 导入或 css @import 导入。

pages/index.vue

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

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

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

二、全局注入本地样式表

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

三、全局注入本地字体

将本地字体文件放在 assets/ 目录中，

定义字体。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>

四、分发来自 NPM 的样式表

以 animate.css 为例。

安装

npm install animate.css

局部引入：页面、布局和组件

app.vue

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

<style>
  @import "animate.css";
</style>

全局引入：nuxt.confg.ts

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

五、注入外部样式表

1.全局样式

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

export default defineNuxtConfig({
  head: {
    link: [
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css",
      },
    ],
  },
});

2.局部样式 - 动态添加

useHead({ link: [ { rel: 'stylesheet', href:
'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' } ]
})

六、使用 CSS 预处理器

Nuxt3 支持使用 CSS 预处理器，如 Sass、Less、Stylus 等。

注册本地 scss 样式表

安装

npm install sass

使用

app.vue

<style lang="scss">
  @use "~/assets/scss/main.scss";
  h1 {
    color: red;
  }
</style>

全局注入本地 scss 文件

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

全局注入 scss 样式变量

assets/_color.scss

$primary: blue;
$secondary: red;

nuxt.config.ts

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

app.vue

<style lang="scss">
  h1 {
    color: $primary;
  }
</style>

七、单文件组件样式

类和样式绑定

你可以利用 Vue SFC 功能来使用 class 和 style 属性来设置组件的样式。

<script setup lang="ts">
  const isActive = ref(true);
  const hasError = ref(false);
  const classObject = reactive({
    active: true,
    "text-danger": false,
  });
</script>

<template>
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  <div :class="classObject"></div>
</template>

class 和 style 属性设置组件的样式属于 Vue 的基本功能之一。更多信息请参考 Vue 文档。

动态样式 v-bind

你可以使用 v-bind 函数在你的样式块中引用 JavaScript 变量和表达式。 绑定将是动态的，这意味着如果变量值发生更改，样式将更新。

<script setup lang="ts">
  const color = ref("red");
</script>

<template>
  <div class="text">hello</div>
</template>

<style>
  .text {
    color: v-bind(color);
  }
</style>

作用域样式

scoped 属性允许您单独设置组件的样式。使用此属性声明的样式将仅适用于此组件。

<template>
  <div class="example">hi</div>
</template>

<style scoped>
  .example {
    color: red;
  }
</style>

预处理器支持

SFC 样式块支持预处理器语法。Vite 内置了对 .scss、.sass、.less、.styl 和 .stylus 文件的支持，无需配置。您只需先安装它们，它们将直接在 SFC 中使用 lang 属性。

<style lang="scss">
  /* Write scss here */
</style>

CSS 模块

你可以将 CSS 模块与 module 属性一起使用。使用注入的变量访问它：$style

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
  .red {
    color: red;
  }
</style>

八、利用布局实现多种样式

如果需要完全不同地设置应用程序不同部分的样式，可以使用布局。 为不同的布局使用不同的样式。

<template>
  <div class="default-layout">
    <h1>Default Layout</h1>
    <slot />
  </div>
</template>

<style>
.default-layout {
  color: red;
}
</style>

好了，分享结束，谢谢点赞，下期再见！