在npm中是否有优雅方案实现按页参数化配置Sass打包？

前置依赖 #

首先安装所需的开发依赖：
npm install sass chokidar glob jsdom --save-dev

1. 目录映射规则约定 #

先统一文件命名和存放规则，保证页面和样式的一一对应：

• 页面源码存放在src/pages/，文件名为{page_id}.html
• 页面对应Sass源码存放在src/styles/pages/，文件名为{page_id}.scss
• 编译后产物统一输出到dist/目录：页面输出到dist/{page_id}.html，CSS输出到dist/css/{page_id}.bundle.css

2. 自动编译Sass核心逻辑 #

可以通过Node脚本实现全量+增量编译，核心代码示例：

const sass = require('sass');
const glob = require('glob');
const chokidar = require('chokidar');
const fs = require('fs');
const path = require('path');

// 全量编译函数
function buildAllSass() {
  const htmlFiles = glob.sync('src/pages/*.html');
  htmlFiles.forEach(htmlPath => {
    const pageId = path.basename(htmlPath, '.html');
    const sassPath = `src/styles/pages/${pageId}.scss`;
    if (!fs.existsSync(sassPath)) return;

    // 编译Sass
    const result = sass.compile(sassPath, { style: 'compressed' });
    const outputPath = `dist/css/${pageId}.bundle.css`;
    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
    fs.writeFileSync(outputPath, result.css);
  })
}

// 监听模式增量编译
if (process.env.NODE_ENV === 'development') {
  chokidar.watch('src/styles/pages/*.scss').on('change', (changedPath) => {
    const pageId = path.basename(changedPath, '.scss');
    const htmlPath = `src/pages/${pageId}.html`;
    if (!fs.existsSync(htmlPath)) return;
    // 执行单文件编译逻辑，和全量编译一致
  })
}

3. 自动插入CSS链接逻辑 #

编译Sass完成后，自动向对应页面注入CSS标签，核心代码：

const { JSDOM } = require('jsdom');

function injectCssLink(pageId) {
  const htmlContent = fs.readFileSync(`src/pages/${pageId}.html`, 'utf-8');
  const dom = new JSDOM(htmlContent);
  const document = dom.window.document;

  // 检查是否已注入过对应CSS
  const existedLink = document.querySelector(`link[href*="${pageId}.bundle.css"]`);
  if (existedLink) return dom.serialize();

  // 生成link标签插入head末尾
  const linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = `./css/${pageId}.bundle.css`;
  document.head.appendChild(linkTag);

  const outputHtml = dom.serialize();
  fs.writeFileSync(`dist/${pageId}.html`, outputHtml);
  return outputHtml;
}

4. 可选优化项 #

• 全局公共样式可以单独编译为common.bundle.css，默认注入到所有页面的head中，不用每个页面重复引入
• 生产环境构建时可以给CSS文件名添加hash戳，避免浏览器缓存旧资源
• 可以接入stylelint对Sass代码做自动校验，不符合规范的代码不触发编译

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