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 已经预配置了以下插件:
- postcss-import: Improves the @import rule
- postcss-url: Transforms url() statements
- autoprefixer: Automatically adds vendor prefixes
- cssnano: Minification and purge
利用布局实现多种风格
如果需要为应用程序的不同部分设计完全不同的布局样式,可以使用布局。
布局在上一篇文章的视图章节有简单介绍,此处不做更多讲解,后续专门用一篇文章来细说。
第三方库和模块
在样式设计方面,Nuxt 并不墨守成规,而是为我们提供了多种选择。可以使用任何想要的样式工具,如 UnoCSS 或 Tailwind CSS 等流行库。社区和 Nuxt 团队开发了大量的 Nuxt 模块,使集成变得更加容易。可以在网站的模块部分找到它们。这里有几个模块可以帮助我们开始使用:文章来源:https://www.toymoban.com/news/detail-689737.html
- UnoCSS: Instant on-demand atomic CSS engine
- Tailwind CSS: Utility-first CSS framework
- Fontaine: Font metric fallback
- Pinceau: Adaptable styling framework
- NuxtLabs UI
轻松加载网络字体
可以使用Nuxt Google Fonts 模块来加载 Google Fonts。
如果使用的是UnoCSS,请注意它自带了一个网页字体预设,可以方便地加载来自常见供应商的字体,包括 Google Fonts 等。文章来源地址https://www.toymoban.com/news/detail-689737.html
到了这里,关于Nuxt 菜鸟入门学习笔记五:CSS 样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!