Nuxt 菜鸟入门学习笔记五：CSS 样式-Javascript前端- WEB程序开发笔记

Nuxt 菜鸟入门学习笔记五：CSS 样式

原创
作者：程序员三丰
发布时间：2023-09-01 00:27
标签： Nuxt SSR 服务端渲染
浏览量：908

本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt CSS 样式部分。

[TOC]

![Nuxt](https://cnd.51blog.xyz/images/nuxt-logo.png)
Nuxt 官网地址：[https://nuxt.com/](https://nuxt.com/)

Nuxt 在样式设计方面非常灵活。

- 可以编写自己的样式；
- 可以引用本地和外部样式表；
- 可以使用 CSS 预处理器、CSS 框架、UI 库和 Nuxt 模块来为应用程序设计样式。

# 本地样式表

按照惯例，将本地样式表放在`assets/`目录下。

## 在组件内导入

在组件内导入的样式表将在 Nuxt 渲染的 HTML 中内联。可以通过以下方式导入：

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

_代码示例：_

首先，创建 /assets/css/first.css 文件，内容如下：

```css
// assets/css/first.css

.first {
  background-color: red;
}
```

然后，在页面中导入，并应用：

```vue
// pages/about.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first">AppAlert Component.</AppAlert>
  </div>
</template>

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

## 通过 Nuxt 配置 CSS 属性导入

可以在 Nuxt 配置中使用 css 属性来导入本地样式表，Nuxt 将把它包含到应用程序的所有页面中。这种方式导入样式表也将在 Nuxt 渲染的 HTML 中内联，全局注入并出现在所有页面中。

> **注意：即便页面中没有用到样式表中的样式规则，也会注入并在 HTML 中内联。**

_代码示例：_

第一步，创建 /assets/css/main.css 文件，内容如下：

```css
// assets/css/main.css

.text-bold {
  font-weight: bold;
}
```

第二步，在 Nuxt 配置中导入：

```typescript
// nuxt.config.ts

第三步，在页面中导入，并应用：

```vue
// pages/about.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
  </div>
</template>

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

## 使用字体

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

_代码示例：_

首先，在 css 文件引用字体，并在样式中使用:

```css
// assets/css/main.css

.text-bold {
  font-weight: bold;
}

// 引用定义字体
@font-face {
  font-family: "MyFont";
  src: url("/fonts/test.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

// 样式汇中使用字体
.cool-text {
  font-family: "MyFont";
  font-size: 22px;
}
```

然后，在样式表、页面或组件中通过样式应用字体：

```vue
// pages/index.vue

<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
    <p class="cool-text">爱拼才会赢！</p>
  </div>
</template>
```

## 导入通过 NPM 发布的样式表

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

首先，安装 animate.css 库：

```shell
pnpm add animate.css
```

然后，导入 animate.css:

- 在页面、布局和组件中直接引用：

```vue
// pages/index.vue

- 在 Nuxt 配置的 css 属性中导入：

```typescript
// nuxt.config.ts

最后，使用 animate.css 的动画样式：

```vue
<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert class="first text-bold">AppAlert Component.</AppAlert>
    <p class="cool-text animate__animated animate__bounceIn">爱拼才会赢！</p>
  </div>
</template>

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

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

# 外部样式表

通过在 nuxt.config 文件的 head 部分添加链接元素，就可以在应用程序中包含外部样式表。我们可以使用 Nuxt 配置中的 app.head 属性来操作头部：

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  pages: true,
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_colors.scss" as *;',
        },
      },
    },
  },
  css: ["~/assets/css/main.css"],
  app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
    },
  },
});
```

当然还可以使用不同的方法实现这一结果，而且本地样式表也可以这样包含。

## 动态添加样式表

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

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

**注意：** 这种方式目前使用体验不是很好，如果要使用这种方式，需要做更多技术实践。

## 【高级】使用 Nitro 插件修改渲染的头部

如果需要更高级的控制，可以使用钩子拦截渲染的 html，并以编程方式修改头部。
此处暂不介绍，如有兴趣，提供官方链接：[https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets](https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets)

# 使用预处理器

常用预处理器 SCSS、Sass、Less 或 Stylus 等，使用前需要先安装。
本文以 SCSS 为例：

第一步，进行安装：

```shell
pnpm add sass
```

第二步，创建 scss 文件：

```scss
// assets/scss/main.scss

.parent {
  background-color: #eee;
  padding: 20px;

.child {
    background-color: aquamarine;
    padding: 20px;
  }
}
```

第三步，两种导入方式：

- 可以在页面、布局和组件中使用预处理器的语法导入源文件。

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

- 可以使用 Nuxt 配置文件中 css 属性全局导入。

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

无论使用上面的哪种导入方式，编译后的样式表将被内联到 Nuxt 渲染的 HTML 中。

> 如果你需要在预处理文件中注入代码，比如带有颜色变量的 sass 部分，你可以使用 vite 预处理器选项来实现。（前一篇文章静态资源中全局样式导入有样式实现，或者参考官方文档：[https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets](https://nuxt.com/docs/getting-started/styling#dynamically-adding-stylesheets)）
> Nuxt 默认使用 Vite。如果希望使用 webpack，请参阅每个预处理器加载器的文档。

# 单文件组件 SFC 样式

Vue 和 SFC 最棒的地方之一就是它能很自然地处理样式。可以直接在组件文件的样式块中编写 CSS 或预处理代码，因此无需使用 CSS-in-JS 之类的东西就能获得绝佳的开发体验。

> 【拓展】如果你想使用 CSS-in-JS，你可以找到支持它的第三方库和模块，比如 pinceau。可以参考[Vue 文档](https://cn.vuejs.org/guide/scaling-up/sfc.html)，获取关于[SFC](https://cn.vuejs.org/guide/scaling-up/sfc.html)中组件样式的全面参考。

## 类和样式绑定

在 Vue 的 SFC 组建中，可以通过类和样式属性来为组件设置样式。
详细内容请阅读 Vue 文档：[Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html)

## 使用 v-bind 的动态样式

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

```vue
// pages/test.vue

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

## Scoped Styles

范围属性允许对组件进行独立样式化。使用该属性声明的样式将仅适用于该组件。

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

更多内容请阅读 Vue 文档：[单文件组件 CSS 功能](https://cn.vuejs.org/api/sfc-css-features.html)

## CSS Modules

可以通过 module 属性使用 CSS 模块。使用注入的 $style 变量访问它。

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

## 预处理器支持

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

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

# 使用 PostCSS

> 科普：PostCSS 是什么？
> PostCSS 是一个使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和混合、transpile 未来 CSS 语法、内联图像等。
> 官网链接：[https://www.postcss.com.cn/](https://www.postcss.com.cn/)

Nuxt 内置了 postcss。可以在`nuxt.config`文件中进行配置。

```typescript
export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nested': {}
      "postcss-custom-media": {}
    }
      }
})
```

为了在 SFC 中使用正确的语法高亮，可以使用 postcss lang 属性。

```typescript
<style lang="postcss">/* Write stylus here */</style>
```

默认情况下，Nuxt 已经预配置了以下插件：

- [postcss-import](https://github.com/postcss/postcss-import): Improves the @import rule
- [postcss-url](https://github.com/postcss/postcss-url): Transforms url() statements
- [autoprefixer](https://github.com/postcss/autoprefixer): Automatically adds vendor prefixes
- [cssnano](https://cssnano.co/): Minification and purge

# 利用布局实现多种风格

如果需要为应用程序的不同部分设计完全不同的布局样式，可以使用布局。
布局在上一篇文章的视图章节有简单介绍，此处不做更多讲解，后续专门用一篇文章来细说。

# 第三方库和模块

在样式设计方面，Nuxt 并不墨守成规，而是为我们提供了多种选择。可以使用任何想要的样式工具，如 UnoCSS 或 Tailwind CSS 等流行库。社区和 Nuxt 团队开发了大量的 Nuxt 模块，使集成变得更加容易。可以在网站的模块部分找到它们。这里有几个模块可以帮助我们开始使用：

- [UnoCSS](https://nuxt.com/modules/unocss): Instant on-demand atomic CSS engine
- [Tailwind CSS](https://nuxt.com/modules/tailwindcss): Utility-first CSS framework
- [Fontaine](https://github.com/nuxt-modules/fontaine): Font metric fallback
- [Pinceau](https://pinceau.dev/): Adaptable styling framework
- [NuxtLabs UI](https://nuxt.com/modules/nuxtlabs-ui)

## 轻松加载网络字体

可以使用[Nuxt Google Fonts 模块](https://github.com/nuxt-modules/google-fonts)来加载 Google Fonts。
如果使用的是[UnoCSS](https://unocss.dev/integrations/nuxt)，请注意它自带了一个[网页字体预设](https://unocss.dev/presets/web-fonts)，可以方便地加载来自常见供应商的字体，包括 Google Fonts 等。

WEB程序开发笔记

Nuxt 菜鸟入门学习笔记五：CSS 样式

文章归档

推荐文章

热门标签

友情链接