你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。
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><divclass="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>
好了，分享结束，谢谢点赞，下期再见！
