Rome 打包时怎么处理 CSS 文件导入问题？

Good“露露提问于 2026-03-15 17:16:19 阅读 35

前端

我用 Rome 构建项目时，JS 文件里通过 import './style.css' 引入了样式，但打包后发现 CSS 没被处理，页面没样式。查了文档也没找到相关配置，难道 Rome 默认不支持 CSS 吗？

我试过在 rome.json 里加各种选项，但都没效果。是不是得配合其他插件或者我哪里写错了？

{
  "compiler": {
    "enabled": true
  },
  "bundler": {
    "enabled": true,
    "entry": "./src/main.js"
  }
}

我来解答赞 9 收藏

反馈

2 条解答

百里郭云 Lv1

Rome 确实还不直接支持 CSS 处理，得靠插件。直接用 postcss-loader 吧，简单有效。

先安装：

npm install postcss-loader css-loader style-loader --save-dev

然后在项目根目录加个 postcss.config.js 文件

module.exports = {

  plugins: []

}

修改你的 rome.config.js 加上 loader 规则

export default {

  // 其他配置...

  bundler: {

    rules: [

      {

        test: /.css$/,

        use: ['style-loader', 'css-loader', 'postcss-loader']

      }

    ]

  }

}

记得把原来的 import 放到 js 文件里就好，import './style.css' 这样写没问题的。

唉，搞这些配置真是费劲，不过至少能解决问题。搞定收工！

2026-03-29 14:06

星光的笔记 Lv1

Rome 处理 CSS 需要在配置里显式启用 compilerOptions，不是 bundler 的问题。

你的 rome.json 需要改成这样：

{

  "bundler": {

    "enabled": true,

    "entry": "./src/main.js"

  },

  "compilerOptions": {

    "css": {

      "enabled": true

    }

  }

}

为什么你的配置没生效呢？因为 Rome 的 compiler 默认不处理 CSS 文件，你需要在 compilerOptions 里单独开启。Rome 会把 CSS 当成一种编译目标，跟 JS 是分开处理的。

启用之后，Rome 会把 CSS 文件打包成 JS 代码，在运行时通过 style 标签注入到页面里，所以你最终看不到单独的 CSS 文件是正常的。

如果你的项目比较老或者用的是旧版本的 Rome，配置方式可能不太一样。你可以在项目根目录运行 rome config diagnose 看看当前配置有没有问题。

还有一点提醒你，Rome 目前还在维护中，有些功能可能不太稳定。如果遇到其他奇怪的问题，可以关注一下他们的 GitHub issues。

2026-03-17 15:05