style-class：一款解决 uni-app 多端开发痛点的原子化 CSS 插件

style-class：一款解决 uni-app 多端开发痛点的原子化 CSS 插件

引言

在当今的前端开发中，原子化 CSS 已经成为主流趋势，Tailwind CSS 等工具的普及让我们尝到了高效开发的甜头。然而，当我们使用 uni-app 进行跨端开发时，却遇到了一个棘手的问题：现有的原子化 CSS 方案如 Tailwind CSS、UnoCSS 在 uni-app 中无法直接使用，需要安装多个插件、编写大量配置才能用上，使用成本非常高。更糟糕的是，在 nvue 和 uvue 环境下即使配置完成也无法正常使用。

今天，我要向大家介绍一款我开源的插件 —— style-class，它专门解决了这个问题，让你在 uni-app 多端开发中也能畅快地使用原子化 CSS。

痛点分析

在开始介绍插件之前，先让我们看看 uni-app 多端开发中遇到的具体问题：

1. 选择器限制：nvue、uvue 只能使用 class 选择器，不支持 tag、#id、[attr] 等选择器
2. 类名字符限制：class 选择器仅支持 A-Z、a-z、0-9、_、- 字符，很多原子化 CSS 的写法无法使用
3. 现有方案不兼容：Tailwind、UnoCSS 等主流方案在 nvue/uvue 环境下无法直接使用

style-class 简介

style-class是一款专为 Vue/uni-app 项目设计的原子化 CSS 插件，具有以下核心特性：

• 🎯基于uni-app框架量身定做- 深度适配 uni-app 生态，完美解决多端开发痛点
• 👶对小白友好- 配合预设包可快速上手，体验流畅
• 🚀渐进式设计- 核心不内置规则，可根据需求灵活扩展
• 🔧扩展包支持：推荐安装@style-class/preset-tailwind获取 Tailwind V3 规则
• 🌐多端兼容：完美解决 uni-app nvue、uvue 选择器限制问题
• 🎨高级功能：支持 CSS 变量、主题、CSS3 动画、单位转换、快捷方式等
• ⚡智能扫描：自动扫描项目文件，实时生成 CSS
• 🔥热更新：开发时自动热更新，提升开发效率

快速开始

安装

# 基础插件npminstallstyle-class-D# 推荐扩展包（获取 Tailwind V3 规则）npminstall@style-class/preset-tailwind-D

初始化

npx style-class init

Vite 项目配置

importstyleClassfrom'style-class'import{theme,rules}from'@style-class/preset-tailwind'exportdefault{plugins:[styleClass({theme:{...theme,extend:{colors:{primary:'#007aff',secondary:'#ff9900',}}},rules:[...rules]})]}

Webpack 项目配置

const{theme,rules}=require('@style-class/preset-tailwind');module.exports={// ...module:{rules:[// ...{test:/\.vue$/,use:[{loader:'vue-loader'},{loader:'style-class/webpack',options:{theme:{...theme,extend:{colors:{primary:'#007aff',secondary:'#ff9900',}}},rules:[...rules],include:[/\.vue$/],exclude:[/node_modules/]}}],},]},// ...};

引入生成的 CSS

在main.js中引入自动生成的style-class.scss：

import"style-class.scss"

开始使用

<template> <div class="flex flex-col items-center gap-4 p-4"> <div class="w-full h-[32px] bg-primary text-[white] rounded-lg"></div> <button class="px-4 py-2 bg-secondary text-white rounded hover:opacity-80"> 按钮 </button> </div> </template>

核心功能详解

1. CSS 主题配置

支持自定义主题和扩展主题：

theme:{colors:{primary:'#409EFF',success:'#67C23A',},extend:{colors:{warning:'#E6A23C',danger:'#F56C6C',},}}

2. 快捷方式

将多个规则组合成一个简写：

shortcuts:{'btn':'px-4 py-2 rounded font-medium transition-colors','btn-primary':'btn bg-primary text-white hover:bg-blue-600','card':'bg-white rounded-lg shadow-md overflow-hidden','flex-center':'flex items-center justify-center',}

使用：

<div class="card"> <button class="btn-primary">确认</button> </div>

3. 属性模式

支持通过 HTML 属性而非 class 来书写样式，使模板结构更清晰：

{prefix:"css-",prefixedOnly:false,splicing:false}

使用：

<div css-bg="bg-primary" text="text-white"></div>

4. 单位转换

自动转换不同单位，适配不同设备：

{enableUnitConversion:true,unitConversions:[{property:/^(width|height|padding|margin|font-size).*$/,fromUnit:'px',toUnit:'rem',converter:(value)=>`${value/16}rem`}]}

5. CSS 自定义规则

支持静态规则和动态规则：

rules:[// 静态规则['text-red',{'color':'red'}],// 动态规则[/^text-\[(.+)\]$/,([,value])=>({color:value})],// 使用主题[/^text-(.*)$/,([,value],{theme})=>{if(theme.colors[value])return{color:theme.colors[value]};}],]

实战案例

让我们看一个完整的卡片组件示例：

<template> <div class="container mx-auto px-4"> <div class="card"> <div class="card-header"> <h2 class="text-xl font-bold text-gray-800">用户信息</h2> </div> <div class="card-body"> <div class="flex-center mb-4"> <div class="w-20 h-20 rounded-full bg-primary"></div> </div> <p class="text-gray-600 mb-2">用户名：张三</p> <p class="text-gray-600 mb-4">邮箱：zhangsan@example.com</p> <div class="flex-between"> <button class="btn-secondary">取消</button> <button class="btn-primary">确认</button> </div> </div> </div> </div> </template>

为什么选择 style-class？

总结

style-class为 uni-app 多端开发提供了完整的原子化 CSS 解决方案，解决了 nvue、uvue 环境下的选择器限制问题，同时提供了丰富的高级功能。如果你正在使用 uni-app 开发跨端应用，不妨试试这个插件！

相关资源

• 📦 npm 包
• 🔗 GitHub 仓库
• 💬 社区讨论
• 🐛 问题反馈

如果你觉得这个插件对你有帮助，欢迎给个 Star ⭐，也欢迎 PR 和 Issue！