# compileCss

**Repository Path**: coder_home/compile-css

## Basic Information

- **Project Name**: compileCss
- **Description**: sass+tailwindcss 编译器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-21
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS 编译工具

支持 SCSS、PostCSS、TailwindCSS 的 CSS 编译工具，自带文件监听功能。

## 安装

```bash
npm install -g compile-css
# 或
npm install --save-dev compile-css
```

## 使用方法

直接在项目根目录运行：

```bash
compile-css
```

工具会自动读取根目录下的 `compileCssConfig.js` 配置文件，启动文件监听并开始编译。

## 配置说明

在项目根目录创建 `compileCssConfig.js` 文件。

### 配置示例

```javascript
const path = require('path');

module.exports = {
    presets: [
        {
            name: 'pc',                                // 标识名称，用于日志输出
            scss: path.resolve('./scss/pc'),            // SCSS 源文件目录
            content: ['./html/**/*.{html,htm,php}'],    // TailwindCSS content（可选，与 tailwind.config.js 合并）
            entry: ['common.css', 'style.css'],         // 入口 CSS 文件（默认 ['common.css']）
            temp: path.resolve('./temp/pc'),            // 编译临时目录
            dist: path.resolve('./html/pc', 'css'),     // 编译输出目录
            scssIgnore: [],                             // 忽略的 SCSS 文件
            watchIgnore: []                             // 忽略的监听文件
        },
        {
            name: 'mobile',
            scss: path.resolve('./scss/mobile'),
            content: ['./html/mobile/**/*.{html,htm}'],
            entry: 'common.css',
            temp: path.resolve('./temp/mobile'),
            dist: path.resolve('./html/mobile', 'css'),
            scssIgnore: [],
            watchIgnore: []
        }
    ]
};
```

### 配置项说明

| 配置项 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| `name` | `string` | 否 | 标识名称，用于控制台日志输出，方便区分不同 preset 的编译信息 |
| `scss` | `string` | 是 | SCSS 源文件目录。递归扫描该目录下所有非 `_` 开头的 `.scss` 文件作为入口文件编译 |
| `content` | `string` / `string[]` | 否 | TailwindCSS content 路径。格式与 `tailwind.config.js` 的 `content` 一致，支持 glob 模式。未设置时完全使用 `tailwind.config.js` 的配置。设置了则会与之合并 |
| `entry` | `string` / `string[]` | 否 | `content` 目录文件变化时重新编译的样式文件，默认 `['common.css']` |
| `temp` | `string` | 是 | 编译临时目录。SCSS 先编译为普通 CSS 存放到此，再交给 PostCSS 处理。**每次启动时自动清空** |
| `dist` | `string` | 是 | 最终输出目录。经过 tailwindcss、autoprefixer、cssnano 处理后的 CSS 文件输出到这里 |
| `scssIgnore` | `string[]` | 否 | SCSS 忽略列表。支持文件名、相对路径或正则表达式。被忽略的文件不会作为入口文件编译 |
| `watchIgnore` | `string[]` | 否 | 监听忽略列表。`content` 目录中匹配的文件变化不会触发重新编译 |

### 忽略规则

`scssIgnore` 和 `watchIgnore` 支持四种匹配方式：

- **完整相对路径**：`'scss/common.scss'` — 匹配项目根目录下 `scss/common.scss`
- **目录前缀**：`'scss/lib'` — 匹配 `scss/lib` 目录下的所有文件
- **文件名**：`'_variables.scss'` — 匹配所有名为 `_variables.scss` 的文件
- **正则表达式**：`/^scss\/lib\//` — 使用正则匹配相对路径

### 注意事项

- `scss` 目录中以 `_` 开头的文件（如 `_variables.scss`）被视为模块文件，不会作为入口文件编译。但当模块文件发生变化时，会触发所有入口文件重新编译
- 每个 preset 的 `temp` 目录必须唯一，不能与其他 preset 共享
- 每个 preset 的 `temp` 目录启动时自动清空重建
- `tailwind.config.js` 必须放在项目根目录
- `content` 字段与 `tailwind.config.js` 中的 `content` 会合并，无需重复配置
- ⚠️ **`tailwind.config.js` 必须使用 TailwindCSS v3 的配置格式**（`module.exports = { content: [...], theme: {...}, plugins: [...] }`），本工具不兼容 TailwindCSS v4 的 CSS 驱动配置方式

## 编译流程

```
SCSS 文件  ──sass编译──▶  temp 目录（临时 CSS）  ──tailwindcss + autoprefixer + cssnano──▶  dist 目录（最终 CSS）
```

1. SCSS 文件变化 → `sass` 编译到 `temp` 目录
2. `temp` 目录 CSS 文件变化 → PostCSS（tailwindcss + autoprefixer + cssnano）编译到 `dist` 目录
3. `content` 目录文件变化 → 重新编译 `entry` 中配置的 CSS 文件，更新 TailwindCSS 工具类

## 功能特性
- SCSS 编译
- PostCSS 处理（tailwindcss、autoprefixer、cssnano）
- 文件变化自动监听编译
- 支持多套配置（PC、手机等多端项目）
- 启动时自动清理临时目录