如何配置Rollup+PostCSS不提取CSS文件？

当然有可行方案，只需调整rollup-plugin-postcss的配置，就能让编译后的CSS嵌入到输出的main.js中，最终仅生成单个JS文件，浏览器运行时会自动将CSS注入到页面，和Vite的处理逻辑一致。具体操作如下：

1. 确保依赖安装 #

先确认已安装必要的插件，没有的话执行安装命令：

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

2. 修改Rollup配置文件 #

在rollup.config.js中配置rollup-plugin-postcss的inject选项为true，同时禁用extract（单独提取CSS的功能）：

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/main.js', // 你的入口文件路径
  output: {
    file: 'dist/assets/main.js', // 输出的JS文件路径
    format: 'es' // 根据需求选择格式，比如iife、umd等
  },
  plugins: [
    postcss({
      inject: true, // 核心配置：将CSS注入到JS中
      extract: false, // 关闭单独生成CSS文件
      // 可选：添加PostCSS插件处理CSS（如自动前缀、压缩等）
      plugins: [
        // require('autoprefixer'),
        // require('cssnano')
      ],
      // 可选：处理CSS中的资源（图片、字体等）
      url: {
        inline: true, // 将小体积资源转为base64嵌入JS
        limit: 10 * 1024 // 阈值：10KB以下的资源才inline
      }
    })
  ]
};

原理说明 #

当inject设为true时，rollup-plugin-postcss会把编译后的CSS转换成一段JS代码——这段代码在浏览器运行时，会动态创建<style>标签，并把CSS内容插入其中，最终挂载到页面的<head>里，实现和Vite客户端一样的效果。

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