Rollup打包时如何正确处理CSS文件？

Des.玉惠提问于 2026-03-30 13:44:14 阅读 4

前端

我用Rollup打包一个组件库，里面有些JS模块import了.css文件，但打包时报错说无法解析CSS。我装了rollup-plugin-postcss，也配置了，但生成的bundle里没有包含样式，而且控制台还警告Could not resolve './style.css'。

这是我的配置：

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'es' },
  plugins: [postcss()]
};

是不是哪里漏了？为啥CSS没被打进去？

我来解答赞 0 收藏

反馈

1 条解答

一啸天 Lv1

看起来你漏了几个关键配置。首先，rollup-plugin-postcss默认不会自动加载CSS到JavaScript中，你需要明确指定如何处理生成的CSS文件。

试试这样修改：

import postcss from 'rollup-plugin-postcss';



export default {

  input: 'src/index.js',

  output: { file: 'dist/bundle.js', format: 'es' },

  plugins: [

    postcss({

      extract: true, // 这个配置会把CSS提取到单独的文件

      extensions: ['.css'], // 明确支持的文件扩展名

    })

  ]

};

另外建议加上extensions配置，虽然不是必须的，但写得更清楚些总是好的。

如果想让CSS直接注入到HTML文档中而不是生成单独文件，可以把extract设为false或者使用其他选项。

对了，记得在你的项目根目录下有个style.css文件，而且路径要写对，不然还是会报错说找不到文件。这种相对路径问题最烦人了，排查起来费劲。

总的来说，rollup-plugin-postcss这个插件还是挺好用的，就是有时候配置项太多容易让人迷糊。稍微调整一下应该就能正常工作了。

2026-03-30 14:10