如何从两个CSS文件中提取原始编译文件的独有规则并合并？

我来帮你搞定这个问题——要从那个完整的编译CSS里抠出你现有Sass编译后缺失的规则，核心思路就是对比两个CSS文件并精准提取差异，下面是具体的步骤和实用工具推荐：

第一步：预处理两个CSS文件 #

首先得让两个CSS文件的格式统一，避免因换行、空格或注释导致对比结果出错。推荐用prettier快速格式化：

# 先全局安装prettier（如果没装过的话）
npm install -g prettier

# 格式化你的两个CSS文件，full.css是大型原始CSS，compiled.css是你用现有Sass编译出的CSS
npx prettier --write full.css compiled.css

第二步：提取独有的CSS规则 #

这里有两种靠谱的方法，选你顺手的来：

方法1：用css-difference命令行工具 #

这是专门针对CSS文件做差异对比的工具，能直接输出full.css里有但compiled.css里没有的规则：

# 安装工具
npm install -g css-difference

# 对比两个文件，把独有的规则输出到新文件
css-difference full.css compiled.css > unique-rules.css

跑完这条命令，unique-rules.css就是你要的结果——只包含大型CSS独有的样式规则。

方法2：用PostCSS自定义脚本处理 #

如果你熟悉Node.js，也可以写个简单的PostCSS脚本，更精准地控制对比逻辑（比如区分同一选择器下的不同属性）：

const fs = require('fs');
const postcss = require('postcss');

// 读取两个CSS文件内容
const fullCss = fs.readFileSync('full.css', 'utf8');
const compiledCss = fs.readFileSync('compiled.css', 'utf8');

// 先解析compiled.css的所有规则，存到Set里方便快速查找
const compiledDeclarations = new Set();
postcss().process(compiledCss).then(result => {
  result.root.walkRules(rule => {
    rule.each(decl => {
      // 用「选择器+属性+属性值」作为唯一标识，避免误判
      compiledDeclarations.add(`${rule.selector}|${decl.prop}|${decl.value}`);
    });
  });

  // 处理full.css，只保留不在compiledDeclarations里的声明
  return postcss(plugin => {
    plugin.walkRules(rule => {
      let hasUniqueContent = false;
      rule.each(decl => {
        const key = `${rule.selector}|${decl.prop}|${decl.value}`;
        if (compiledDeclarations.has(key)) {
          decl.remove();
        } else {
          hasUniqueContent = true;
        }
      });
      // 如果规则里的属性都被移除了，就删掉整个规则
      if (!hasUniqueContent) rule.remove();
    });
  }).process(fullCss);
}).then(result => {
  fs.writeFileSync('unique-rules.css', result.css);
  console.log('提取完成！结果已保存到unique-rules.css');
});

把这段代码存为extract-unique.js，然后运行：

node extract-unique.js

第三步：整合到现有Sass工作流 #

拿到unique-rules.css之后，你可以这样融入现有开发：

• 直接在主Sass文件里导入：@import './unique-rules.css';（Sass支持直接导入CSS文件）
• 把规则迁移到对应的Sass分文件中，按项目结构整理，方便后续维护
• 如果规则较多，新建一个_missing-styles.scss文件，把内容复制进去再导入主文件

这样后续开发时，你就能在Sass里统一维护所有样式，不用再依赖那个旧的大型CSS文件啦。

内容的提问来源于stack exchange，提问作者Eric