基于Rollup与PostCSS实现单文件CSS构建输出的配置问询

你的需求很明确：在JS里导入多个CSS文件，希望构建时每个都生成独立的dist/[name].css文件，而不是被合并成一个。当前你的Rollup配置里，rollup-plugin-postcss的extract: true会把所有导入的CSS合并成一个和JS bundle同名的CSS文件，这就是问题所在。下面是具体的调整方案：

步骤1：修改PostCSS插件配置 #

我们需要让rollup-plugin-postcss根据每个导入的CSS文件单独生成输出，而不是合并。首先在配置文件顶部导入Node.js内置的path模块（用来处理文件名），然后调整postcss插件的extract选项为自定义函数：

// 新增：导入path模块
import path from 'path';

// ... 其他导入代码保持不变

// 修改postcss插件配置
postcss({
  plugins: [postcssImport(), postcssNested(), autoprefixer()],
  // 自定义提取逻辑：每个原始CSS文件输出到dist目录下的同名文件
  extract: (filename) => {
    return `dist/${path.basename(filename)}`;
  },
  sourceMap: "inline",
  minimize: !dev,
}),

步骤2：验证构建结果 #

运行你的构建命令后，Rollup会处理src/main.js中导入的app.css和admin.css，分别生成dist/app.css和dist/admin.css。同时你的dist/main.bundle.js会保留原本的JS逻辑，不会包含任何CSS代码。

可选优化：添加哈希值用于缓存控制 #

如果需要给生产环境的CSS文件添加哈希后缀（避免缓存问题），可以修改extract函数的命名规则：

extract: (filename) => {
  const baseName = path.basename(filename, '.css');
  return `dist/${baseName}[hash].css`;
},

这样构建后会生成类似dist/app.abc123.css和dist/admin.def456.css的文件，哈希值会根据文件内容自动变化。

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