基础篇四 Nuxt4 全局样式与 CSS 模块

文章目录一、全局样式二、CSS 变量与主题切换三、Scoped CSS四、CSS Modules五、Tailwind CSS六、UnoCSS七、预处理器支持八、PostCSS 配置九、动态样式总结写 CSS 看起来简单但项目大了问题就来了类名冲突、样式覆盖、主题切换……Nuxt 提供了多种样式管理方案今天我们来梳理一下最佳实践。一、全局样式全局样式放在assets或css目录在nuxt.config.ts中引入exportdefaultdefineNuxtConfig({css:[~/assets/css/main.css,~/assets/css/reset.css]})创建assets/css/main.css/* 全局变量 */:root{--primary-color:#00dc82;--text-color:#333;--bg-color:#fff;--border-radius:4px;}/* 暗色主题 */.dark{--primary-color:#00b36b;--text-color:#fff;--bg-color:#1a1a1a;}/* 全局基础样式 */body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text-color);background-color:var(--bg-color);line-height:1.6;}a{color:var(--primary-color);text-decoration:none;}a:hover{text-decoration:underline;}二、CSS 变量与主题切换CSS 变量让主题切换变得简单script setup langts const isDark ref(false) const toggleTheme () { isDark.value !isDark.value document.documentElement.classList.toggle(dark, isDark.value) } // 初始化时检查系统主题 onMounted(() { isDark.value window.matchMedia((prefers-color-scheme: dark)).matches document.documentElement.classList.toggle(dark, isDark.value) }) /script template button clicktoggleTheme {{ isDark ? : ☀️ }} /button /template配合nuxtjs/color-mode模块更方便pnpmaddnuxtjs/color-mode// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxtjs/color-mode]})script setup langts const colorMode useColorMode() const toggleTheme () { colorMode.preference colorMode.value dark ? light : dark } /script template button clicktoggleTheme {{ colorMode.value dark ? : ☀️ }} /button /template三、Scoped CSS组件内的样式使用scoped避免污染template div classcard h2 classtitle标题/h2 p classcontent内容/p /div /template style scoped .card { border: 1px solid #eee; border-radius: var(--border-radius); padding: 1rem; } .title { color: var(--primary-color); margin-bottom: 0.5rem; } .content { color: var(--text-color); } /stylescoped会给样式加上唯一的属性选择器不会影响其他组件。四、CSS Modules想要更严格的类名隔离用 CSS Modulesscript setup langts import styles from ./ArticleCard.module.css /script template article :classstyles.card h2 :classstyles.title文章标题/h2 p :classstyles.content文章内容/p /article /templateArticleCard.module.css.card{border:1px solid #eee;padding:1rem;}.title{color:#333;}.content{color:#666;}编译后类名会变成_card_abc123这样的唯一值。五、Tailwind CSSNuxt 对 Tailwind 支持很好pnpmadd-Dnuxtjs/tailwindcss// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[nuxtjs/tailwindcss],tailwindcss:{cssPath:~/assets/css/tailwind.css,configPath:tailwind.config.ts}})创建tailwind.config.tsimporttype{Config}fromtailwindcssexportdefault{content:[./components/**/*.{js,vue,ts},./layouts/**/*.vue,./pages/**/*.vue,./plugins/**/*.{js,ts},./app.vue],theme:{extend:{colors:{primary:#00dc82}}}}satisfies Config现在可以直接用 Tailwind 类名template div classp-4 border rounded-lg h1 classtext-2xl font-bold text-primary标题/h1 p classtext-gray-600 mt-2内容/p button classmt-4 px-4 py-2 bg-primary text-white rounded hover:opacity-80 按钮 /button /div /template六、UnoCSSUnoCSS 是原子化 CSS 引擎比 Tailwind 更快pnpmadd-Dunocss/nuxt// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[unocss/nuxt]})创建uno.config.tsimport{defineConfig,presetUno,presetAttributify,presetIcons}fromunocssexportdefaultdefineConfig({presets:[presetUno(),presetAttributify(),presetIcons()]})使用方式和 Tailwind 类似template div p-4 border rounded-lg h1 text-2xl font-bold text-primary标题/h1 button mt-4 px-4 py-2 bg-primary text-white rounded hover:opacity-80 按钮 /button /div /template七、预处理器支持Nuxt 支持 Sass、Less、Stylus 等预处理器pnpmadd-Dsass使用style scoped langscss $primary: #00dc82; .card { border: 1px solid #eee; .title { color: $primary; :hover { opacity: 0.8; } } .content { color: #666; } } /style全局 Sass 变量创建assets/css/variables.scss$primary: #00dc82; $text-color: #333;在nuxt.config.ts配置exportdefaultdefineNuxtConfig({vite:{css:{preprocessorOptions:{scss:{additionalData:use ~/assets/css/variables.scss as *;}}}}})现在所有组件都能直接用这些变量style scoped langscss .title { color: $primary; // 直接使用无需 import } /style八、PostCSS 配置Nuxt 内置了 PostCSS可以添加插件// nuxt.config.tsexportdefaultdefineNuxtConfig({postcss:{plugins:{postcss-nested:{},// 支持嵌套autoprefixer:{}// 自动添加前缀默认已开启}}})九、动态样式根据状态动态改变样式script setup langts const theme ref({ primary: #00dc82, fontSize: 14px }) const styleVars computed(() ({ --primary: theme.value.primary, --font-size: theme.value.fontSize })) /script template div :stylestyleVars classcontainer p classtext这段文字会根据主题变化/p button clicktheme.primary #ff0000换成红色/button /div /template style scoped .text { color: var(--primary); font-size: var(--font-size); } /style总结样式管理方案对比方案特点适用场景全局 CSS简单直接基础样式、变量Scoped CSSVue 原生支持组件内部样式CSS Modules类名隔离严格大型项目Tailwind/UnoCSS原子化、快速快速开发Sass/Less变量、嵌套复杂样式需求推荐组合全局 CSS 变量 Scoped CSS Tailwind可选下一篇聊聊静态资源管理让你的图片、字体管理更规范。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你