UNIAPP_CSS_TOOLS.md 6.2 KB
uni-app 常用 CSS 工具和依赖介绍
📦 一、CSS 预处理器（需要安装依赖）
1. SCSS/SASS ⭐ 最常用
特点： 功能强大，语法丰富，社区支持好
安装：
npm install sass sass-loader@10 -D
# 或
yarn add sass sass-loader@10 -D
使用：
<style lang="scss">
$primary-color: #0769fb;
$spacing: 16px;
.container {
color: $primary-color;
padding: $spacing;
.title {
font-size: 20px;
}
}
</style>
优点：
- ✅ 变量、嵌套、混入、函数等功能完整
- ✅ 生态成熟，插件多
- ✅ uni-app 官方支持
2. Less
特点： 语法简洁，学习成本低
安装：
npm install less less-loader@6 -D
使用：
<style lang="less">
@primary-color: #0769fb;
@spacing: 16px;
.container {
color: @primary-color;
padding: @spacing;
}
</style>
优点：
- ✅ 语法简单
- ✅ 编译速度快
- ✅ 适合简单项目
3. Stylus
特点： 语法最简洁，可选分号和括号
安装：
npm install stylus stylus-loader -D
使用：
<style lang="stylus">
primary-color = #0769fb
spacing = 16px
.container
color primary-color
padding spacing
</style>
🎨 二、原子化 CSS 框架（需要安装依赖）
1. UnoCSS ⭐ 推荐（性能最好）
特点： 按需生成，体积小，速度快
安装：
npm install -D unocss
npm install -D @unocss/preset-uno
npm install -D unocss-preset-uni # uni-app 专用预设
配置（vite.config.js）：
import UnoCSS from 'unocss/vite'
import { presetUno } from '@unocss/preset-uno'
import presetUni from 'unocss-preset-uni'
export default {
plugins: [
UnoCSS({
presets: [
presetUno(),
presetUni() // uni-app 预设
]
})
]
}
使用：
<template>
<view class="flex items-center justify-center p-4 bg-blue-500">
<text class="text-white text-lg">Hello UnoCSS</text>
</view>
</template>
优点：
- ✅ 按需生成，体积小
- ✅ 性能极佳
- ✅ 有 uni-app 专用预设
- ✅ 支持自定义规则
2. Tailwind CSS
特点： 最流行的原子化 CSS，文档完善
安装：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
注意： uni-app 中使用 Tailwind 需要特殊配置，官方支持有限
使用：
<view class="flex items-center justify-center p-4 bg-blue-500">
<text class="text-white text-lg">Hello Tailwind</text>
</view>
优点：
- ✅ 生态最完善
- ✅ 文档详细
- ✅ 插件丰富
缺点：
- ❌ uni-app 支持不完善
- ❌ 需要额外配置
3. Windi CSS（已停止维护）
特点： Tailwind 的替代品，但已停止维护
不推荐使用
🛠️ 三、CSS 工具库（需要安装依赖）
1. PostCSS + Autoprefixer
作用： 自动添加浏览器前缀
安装：
npm install -D postcss autoprefixer
配置（postcss.config.js）：
module.exports = {
plugins: {
autoprefixer: {}
}
}
2. CSS Modules
作用： 局部作用域 CSS，避免样式冲突
uni-app 默认支持，无需安装
使用：
<style module>
.container {
color: red;
}
</style>
<template>
<view :class="$style.container">Hello</view>
</template>
3. rpx 单位转换工具
uni-app 内置支持 rpx，无需安装
使用：
.container {
width: 750rpx; /* 等于屏幕宽度 */
font-size: 32rpx; /* 自动适配不同屏幕 */
}
📚 四、UI 框架内置 CSS（通常已包含）
1. uView UI
特点： uni-app 最流行的 UI 框架
安装：
npm install uview-ui
包含：
- ✅ 内置样式系统
- ✅ 主题定制
- ✅ 响应式工具类
2. uni-ui
特点： DCloud 官方 UI 组件库
安装：
npm install @dcloudio/uni-ui
包含：
- ✅ 官方维护
- ✅ 与 uni-app 深度集成
3. ColorUI
特点： 专注样式的 UI 库
安装：
# 直接下载 CSS 文件或通过 npm
npm install colorui
包含：
- ✅ 丰富的颜色系统
- ✅ 动画效果
- ✅ 工具类
🎯 五、推荐组合方案
方案一：基础项目
SCSS + PostCSS + Autoprefixer
适合： 中小型项目，需要预处理器功能
方案二：现代化项目 ⭐ 推荐
UnoCSS + unocss-preset-uni
适合： 追求性能和开发效率的项目
方案三：传统项目
Less + uView UI
适合： 需要完整 UI 框架支持的项目
📝 六、快速安装命令汇总
SCSS
npm install sass sass-loader@10 -D
Less
npm install less less-loader@6 -D
UnoCSS（推荐）
npm install -D unocss @unocss/preset-uno unocss-preset-uni
Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
PostCSS + Autoprefixer
npm install -D postcss autoprefixer
uView UI
npm install uview-ui
⚠️ 注意事项
sass-loader 版本：
- uni-app 通常需要
sass-loader@10 - 新版本可能不兼容
- uni-app 通常需要
less-loader 版本：
- 通常使用
less-loader@6 - 注意与 webpack 版本匹配
- 通常使用
UnoCSS 配置：
- 需要在
vite.config.js中配置 - 需要创建
uno.config.js配置文件
- 需要在
小程序限制：
- 某些 CSS 特性在小程序中不支持
- 注意兼容性
rpx 单位：
- uni-app 内置支持
- 无需额外配置
🔗 官方文档链接
- uni-app 官方： https://uniapp.dcloud.net.cn/
- UnoCSS： https://unocss.dev/
- Tailwind CSS： https://tailwindcss.com/
- SCSS： https://sass-lang.com/
- Less： https://lesscss.org/
- uView UI： https://www.uviewui.com/
💡 总结
最推荐的组合：
- UnoCSS - 现代化、高性能
- SCSS - 功能强大、生态好
- uView UI - 完整的 UI 解决方案
根据项目需求选择合适的工具，不要过度依赖，保持代码简洁！