如何独立打包CSS与JS文件？无需捆绑HTML的方案咨询

如果只是需要合并、打包CSS文件，完全不需要绑定HTML或JS，以下几种方案都能满足需求：

1. PostCSS + 配套插件（轻量且灵活） #

这是纯CSS处理的首选方案，完全不涉及JS/HTML的绑定：

• 安装依赖：

  npm install postcss postcss-cli postcss-import cssnano --save-dev
  

• 新建postcss.config.js配置文件：

  module.exports = {
    plugins: [
      require('postcss-import'), // 解析并合并所有通过@import引入的CSS文件
      require('cssnano') // 可选：压缩最终输出的CSS
    ]
  }
  

• 执行打包命令：

  npx postcss src/**/*.css -o dist/bundle.css
  

  可以按需添加autoprefixer这类插件增强功能，全程只处理CSS文件。

2. Rollup + rollup-plugin-postcss #

Rollup虽主打JS打包，但通过插件可实现独立CSS打包：

• 安装依赖：

  npm install rollup rollup-plugin-postcss --save-dev
  

• 新建rollup.config.js：

  import postcss from 'rollup-plugin-postcss';
  
  export default {
    input: 'src/main.css', // 入口CSS（可在其中用@import引入其他文件）
    output: {
      file: 'dist/bundle.css',
      format: 'es' // CSS输出不受此参数影响，任意选择即可
    },
    plugins: [
      postcss({
        extract: true, // 强制输出独立CSS文件，不嵌入JS
        minimize: true // 可选：压缩CSS
      })
    ]
  }
  

• 执行打包：

  npx rollup -c
  

  后续如果需要打包JS，也能复用这套Rollup配置。

3. 纯CLI工具组合（无复杂配置） #

适合简单场景，不需要任何配置文件：

• 安装依赖：

  npm install concat-cli clean-css-cli --save-dev
  

• 执行打包+压缩命令：

  npx concat-cli -f src/**/*.css -o dist/bundle.unminified.css && npx cleancss -o dist/bundle.css dist/bundle.unminified.css
  

  第一步合并所有CSS文件，第二步压缩输出，全程无额外配置。

4. Parcel（零配置懒人方案） #

Parcel支持零配置打包，仅需指定CSS入口即可：

• 安装Parcel：

  npm install parcel-bundler --save-dev
  

• 执行打包：

  npx parcel build src/main.css --out-dir dist
  

  它会自动解析所有CSS依赖，输出单个打包后的文件，完全不需要关联HTML或JS。

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