无需Webpack：为SCSS编译的CSS文件名哈希并注入index.html

步骤1：安装依赖 #

除已有的sass外，需添加replace-in-file用于替换HTML中的CSS引用：

npm install --save-dev replace-in-file

步骤2：编写编译脚本 #

在项目根目录创建build-css.js脚本，完成SCSS编译、哈希生成、文件重命名及HTML引用替换：

const fs = require('fs');
const crypto = require('crypto');
const { execSync } = require('child_process');
const replace = require('replace-in-file');

// 清理旧的哈希CSS文件
const cssDir = 'assets/css';
const cssFiles = fs.readdirSync(cssDir);
cssFiles.forEach(file => {
  if (/main\.[a-f0-9]{8}\.css/.test(file)) {
    fs.unlinkSync(`${cssDir}/${file}`);
  }
});

// 编译SCSS到临时文件
execSync('sass --no-source-map --style=compressed assets/scss/main.scss assets/css/temp.css');

// 基于文件内容生成8位MD5哈希
const cssContent = fs.readFileSync(`${cssDir}/temp.css`, 'utf8');
const hash = crypto.createHash('md5').update(cssContent).digest('hex').slice(0, 8);
const hashedFilename = `main.${hash}.css`;

// 重命名临时文件
fs.renameSync(`${cssDir}/temp.css`, `${cssDir}/${hashedFilename}`);

// 替换index.html中的CSS引用
try {
  replace.sync({
    files: 'index.html',
    from: /assets\/css\/main\.[a-f0-9]{8}\.css|assets\/css\/main\.css/g,
    to: `assets/css/${hashedFilename}`,
  });
  console.log(`✅ 已更新HTML引用：${hashedFilename}`);
} catch (err) {
  console.error('❌ 更新HTML失败：', err);
}

注意：若你的SCSS入口文件不是assets/scss/main.scss，请修改对应路径。

步骤3：更新package.json脚本 #

替换原有build命令，保留start用于开发模式（无哈希，实时编译）：

{
  "name": "scss-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "sass --watch --update --style=expanded assets/scss:assets/css",
    "build": "node build-css.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.63.4",
    "replace-in-file": "^6.3.5"
  }
}

步骤4：配置HTML初始引用 #

确保index.html中的CSS引用为：

<link rel="stylesheet" href="assets/css/main.css">

执行npm run build后，该引用会自动替换为带哈希的文件名。

使用说明 #

• 开发阶段：执行npm start，实时编译SCSS到无哈希的main.css，方便调试。
• 生产构建：执行npm run build，自动生成带哈希的CSS文件并更新HTML引用，同时清理旧的哈希文件。

内容的提问来源于stack exchange，提问作者Manjesh R V