CSS 编译工具

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

安装

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

使用方法

直接在项目根目录运行：

compile-css

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

配置说明

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

配置示例

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、手机等多端项目）
• 启动时自动清理临时目录