Git Hook编译SASS：解决CSS合并冲突的实现方案求助

这问题我之前帮好几个团队踩过坑，核心矛盾其实是手动编译并提交生成的CSS文件——每个人的编译时机不一致，很容易导致CSS文件的合并冲突。你想用Git Hook解决的思路是对的，不过可能是配置细节没做对，我给你梳理几个可行的方案，从快速修复到根源解决：

方案一：用本地pre-commit Hook自动编译并提交最新CSS #

这个方案能确保每次提交代码前，自动编译SASS并把最新的CSS加入暂存区，避免提交过时的CSS文件。

步骤如下：

1. 进入项目的.git/hooks目录，复制默认的示例文件：

   cp .git/hooks/pre-commit.sample .git/hooks/pre-commit
   

2. 编辑pre-commit文件，替换内容为（根据你的SASS路径调整）：

   #!/bin/sh
   # 编译SASS到目标CSS文件（如果用npm安装的sass，可换成npx sass）
   sass src/styles/main.scss dist/styles/main.css
   
   # 将编译后的CSS文件加入暂存区，确保提交的是最新版本
   git add dist/styles/main.css
   
   # 继续执行默认的提交检查
   exit 0
   

3. 给Hook文件添加执行权限（这一步很容易忘，也是很多人配置失败的原因）：

   chmod +x .git/hooks/pre-commit
   

4. 为了让团队成员都能复用这个Hook，你可以把Hook文件放到项目根目录的git-hooks文件夹里，然后让大家执行以下命令统一配置Hook路径：

   git config core.hooksPath ./git-hooks
   

   这样所有人拉取代码后，就能自动用上这个Hook了。

方案二：用Git属性过滤器彻底避免CSS提交 #

如果想从根源上解决冲突，最好的办法是不要把生成的CSS文件提交到仓库，而是用Git的Smudge/Clean过滤器，让每个开发者本地检出代码时自动编译CSS，提交时自动忽略CSS文件。

操作步骤：

1. 在项目根目录创建.gitattributes文件，添加规则：

   dist/styles/main.css filter=sass-compile
   

2. 配置Git过滤器（每个团队成员都需要执行一次）：

   # 提交时自动删除指定CSS文件，不推送到仓库
   git config filter.sass-compile.clean "rm -f %f"
   # 检出代码时自动编译SASS生成CSS文件
   git config filter.sass-compile.smudge "sass src/styles/main.scss %f"
   

3. 把.gitattributes提交到仓库，同时在.gitignore里添加dist/styles/main.css，确保本地CSS文件不会被误提交。

这个方案彻底消除了CSS文件的冲突可能，因为仓库里只有原始的SASS文件，CSS都是本地生成的。

方案三：CI/CD自动编译（适合团队规模较大的情况） #

如果你们用了CI/CD工具（比如GitHub Actions、GitLab CI），可以在代码推送到仓库后，自动编译CSS，然后把编译后的文件用于部署。这种情况下，仓库里依然只存SASS文件，部署环节由CI/CD负责编译，既避免冲突，又能保证部署的CSS是最新的。

常见问题排查（你之前Hook失败的可能原因） #

• Hook文件没有执行权限：一定要用chmod +x给Hook文件加执行权限，否则Git不会执行它。
• 编译命令路径错误：确保sass命令能全局执行，或者用项目本地的依赖（比如npx sass如果是用npm安装的）。
• 没有把编译后的CSS加入暂存区：如果编译后没执行git add，提交的还是旧的CSS，依然会冲突。

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