首页 Javascript前端 Nuxt 菜鸟入门学习笔记五：CSS 样式

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

  • 原创
  • 作者：程序员三丰
  • 发布时间：2023-09-01 00:27
  • 标签： Nuxt SSR 服务端渲染
  • 浏览量：1419
本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt CSS 样式部分。

Nuxt
Nuxt 官网地址：https://nuxt.com/

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

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

本地样式表

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

在组件内导入

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

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

代码示例：

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

// assets/css/first.css

.first {
  background-color: red;
}

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

// pages/about.vue

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

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

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

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

通过 Nuxt 配置 CSS 属性导入

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

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

代码示例：

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

// assets/css/main.css

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

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

// 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"],
});

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

// pages/about.vue

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

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

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

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

使用字体

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

代码示例：

首先，在 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;
}

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

// 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 库：

pnpm add animate.css

然后，导入 animate.css:

  • 在页面、布局和组件中直接引用：
// pages/index.vue

<script>
// 通过js导入
import "animate.css";
</script>

<style>
// 通过css导入
@import url("animate.css");
</style>
  • 在 Nuxt 配置的 css 属性中导入：
// 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", "animate.css"],
});

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

<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>

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

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

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

<style>
@import url("~/assets/css/first.css");
/* @import url("animate.css"); */
</style>

外部样式表

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

// 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 中的值。

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

使用预处理器

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

第一步，进行安装：

pnpm add sass

第二步，创建 scss 文件：

// assets/scss/main.scss

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

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

第三步，两种导入方式：

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

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

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

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

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

如果你需要在预处理文件中注入代码，比如带有颜色变量的 sass 部分，你可以使用 vite 预处理器选项来实现。（前一篇文章静态资源中全局样式导入有样式实现，或者参考官方文档：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 文档，获取关于SFC中组件样式的全面参考。

类和样式绑定

在 Vue 的 SFC 组建中，可以通过类和样式属性来为组件设置样式。
详细内容请阅读 Vue 文档：Class 与 Style 绑定

使用 v-bind 的动态样式

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

// pages/test.vue

<script setup>
const color = ref("red");
setTimeout(() => {
  color.value = "yellow";
}, 3000);
</script>

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

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

Scoped Styles

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

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

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

更多内容请阅读 Vue 文档：单文件组件 CSS 功能

CSS Modules

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

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

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

预处理器支持

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

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

使用 PostCSS

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

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

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

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

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

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

利用布局实现多种风格

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

第三方库和模块

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

轻松加载网络字体

可以使用Nuxt Google Fonts 模块来加载 Google Fonts。
如果使用的是UnoCSS，请注意它自带了一个网页字体预设，可以方便地加载来自常见供应商的字体，包括 Google Fonts 等。

声明：本文为原创文章，51blog.xyz和作者拥有版权，如需转载，请注明来源于51blog.xyz并保留原文链接：https://www.51blog.xyz/article/54

文章归档

PHP后端
Javascript前端
HTML/CSS
开发运维
资源分享
Go入门学习笔记
Python
强烈推荐的PHP全栈开发后台管理系统
buildadmin logo
Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。

推荐文章

热门标签

PHP ThinkPHP ThinkPHP5.1 Go Mysql Mysql5.7 Redis Linux CentOS7 Git HTML CSS CSS3 Javascript JQuery Vue LayUI VMware Uniapp 微信小程序 docker wiki Confluence7 学习笔记 uView ES6 Ant Design Pro of Vue React ThinkPHP6.0 chrome 扩展 翻译工具 Nuxt SSR 服务端渲染 scrollreveal.js ThinkPHP8.0 Mac webman 跨域CORS vscode GitHub ECharts Canvas vue3 three.js 微信支付 PHP全栈开发 Python AI 人工智能 AI辅助 工作经验 实战笔记

友情链接