# uni-app 常用 CSS 工具和依赖介绍

## 📦 一、CSS 预处理器（需要安装依赖）

### 1. **SCSS/SASS** ⭐ 最常用
**特点：** 功能强大，语法丰富，社区支持好

**安装：**
```bash
npm install sass sass-loader@10 -D
# 或
yarn add sass sass-loader@10 -D
```

**使用：**
```vue
<style lang="scss">
$primary-color: #0769fb;
$spacing: 16px;

.container {
  color: $primary-color;
  padding: $spacing;
  
  .title {
    font-size: 20px;
  }
}
</style>
```

**优点：**
- ✅ 变量、嵌套、混入、函数等功能完整
- ✅ 生态成熟，插件多
- ✅ uni-app 官方支持

---

### 2. **Less**
**特点：** 语法简洁，学习成本低

**安装：**
```bash
npm install less less-loader@6 -D
```

**使用：**
```vue
<style lang="less">
@primary-color: #0769fb;
@spacing: 16px;

.container {
  color: @primary-color;
  padding: @spacing;
}
</style>
```

**优点：**
- ✅ 语法简单
- ✅ 编译速度快
- ✅ 适合简单项目

---

### 3. **Stylus**
**特点：** 语法最简洁，可选分号和括号

**安装：**
```bash
npm install stylus stylus-loader -D
```

**使用：**
```vue
<style lang="stylus">
primary-color = #0769fb
spacing = 16px

.container
  color primary-color
  padding spacing
</style>
```

---

## 🎨 二、原子化 CSS 框架（需要安装依赖）

### 1. **UnoCSS** ⭐ 推荐（性能最好）
**特点：** 按需生成，体积小，速度快

**安装：**
```bash
npm install -D unocss
npm install -D @unocss/preset-uno
npm install -D unocss-preset-uni  # uni-app 专用预设
```

**配置（vite.config.js）：**
```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 预设
      ]
    })
  ]
}
```

**使用：**
```vue
<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，文档完善

**安装：**
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**注意：** uni-app 中使用 Tailwind 需要特殊配置，官方支持有限

**使用：**
```vue
<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**
**作用：** 自动添加浏览器前缀

**安装：**
```bash
npm install -D postcss autoprefixer
```

**配置（postcss.config.js）：**
```js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}
```

---

### 2. **CSS Modules**
**作用：** 局部作用域 CSS，避免样式冲突

**uni-app 默认支持，无需安装**

**使用：**
```vue
<style module>
.container {
  color: red;
}
</style>

<template>
  <view :class="$style.container">Hello</view>
</template>
```

---

### 3. **rpx 单位转换工具**
**uni-app 内置支持 rpx，无需安装**

**使用：**
```css
.container {
  width: 750rpx; /* 等于屏幕宽度 */
  font-size: 32rpx; /* 自动适配不同屏幕 */
}
```

---

## 📚 四、UI 框架内置 CSS（通常已包含）

### 1. **uView UI**
**特点：** uni-app 最流行的 UI 框架

**安装：**
```bash
npm install uview-ui
```

**包含：**
- ✅ 内置样式系统
- ✅ 主题定制
- ✅ 响应式工具类

---

### 2. **uni-ui**
**特点：** DCloud 官方 UI 组件库

**安装：**
```bash
npm install @dcloudio/uni-ui
```

**包含：**
- ✅ 官方维护
- ✅ 与 uni-app 深度集成

---

### 3. **ColorUI**
**特点：** 专注样式的 UI 库

**安装：**
```bash
# 直接下载 CSS 文件或通过 npm
npm install colorui
```

**包含：**
- ✅ 丰富的颜色系统
- ✅ 动画效果
- ✅ 工具类

---

## 🎯 五、推荐组合方案

### 方案一：基础项目
```
SCSS + PostCSS + Autoprefixer
```
**适合：** 中小型项目，需要预处理器功能

---

### 方案二：现代化项目 ⭐ 推荐
```
UnoCSS + unocss-preset-uni
```
**适合：** 追求性能和开发效率的项目

---

### 方案三：传统项目
```
Less + uView UI
```
**适合：** 需要完整 UI 框架支持的项目

---

## 📝 六、快速安装命令汇总

### SCSS
```bash
npm install sass sass-loader@10 -D
```

### Less
```bash
npm install less less-loader@6 -D
```

### UnoCSS（推荐）
```bash
npm install -D unocss @unocss/preset-uno unocss-preset-uni
```

### Tailwind CSS
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### PostCSS + Autoprefixer
```bash
npm install -D postcss autoprefixer
```

### uView UI
```bash
npm install uview-ui
```

---

## ⚠️ 注意事项

1. **sass-loader 版本：**
   - uni-app 通常需要 `sass-loader@10`
   - 新版本可能不兼容

2. **less-loader 版本：**
   - 通常使用 `less-loader@6`
   - 注意与 webpack 版本匹配

3. **UnoCSS 配置：**
   - 需要在 `vite.config.js` 中配置
   - 需要创建 `uno.config.js` 配置文件

4. **小程序限制：**
   - 某些 CSS 特性在小程序中不支持
   - 注意兼容性

5. **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/

---

## 💡 总结

**最推荐的组合：**
1. **UnoCSS** - 现代化、高性能
2. **SCSS** - 功能强大、生态好
3. **uView UI** - 完整的 UI 解决方案

根据项目需求选择合适的工具，不要过度依赖，保持代码简洁！