Rollup.js加载*.css?inline文件失败问题求助

我并非专业Web开发人员，若问题表述浅显还请见谅。我正尝试使用Rollup.js打包Web组件包以在WebIQ中使用，执行命令rollup -c --bundleConfigAsCjs构建时出现以下错误：

./src/index.ts → dist_rollup/lib-OB-ian.js...
[!] Error: Could not load C:\Users\...\file.css?inline (imported by file.ts): ENOENT: no such file or directory, open 'C:\Users\file.css?inline'
    at open (node:internal/fs/promises:636:25)
    at Object.readFile (node:internal/fs/promises:1246:14)
    at C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20102:24
    at Queue.work (C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20468:32)

我推测Rollup尝试访问的是.css?inline而非.css文件，但不确定，请问有解决方法吗？

我的rollup.config.cjs配置如下：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import css from "rollup-plugin-import-css";
import postcss from 'rollup-plugin-postcss';

export default [
    {
    input: './src/index.ts',
    output: [
        {
            file: 'dist_rollup/lib-OB-ian.js',
            format: 'cjs'
        },
    ],
    plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" }), json(), css(),
        
        postcss({extensions: ['.css'],})
        ],
    }
]

执行命令：rollup -c --bundleConfigAsCjs
预期结果：生成包含代码的bundle.js文件

问题根源 #

1. Rollup默认不会解析URL查询参数（比如?inline），会把整个file.css?inline当作完整文件名查找，导致文件不存在报错。
2. 同时使用rollup-plugin-import-css和rollup-plugin-postcss两个CSS处理插件，功能重叠引发冲突，加重了解析问题。

具体修复步骤 #

1. 移除冲突插件：删除rollup-plugin-import-css，仅保留rollup-plugin-postcss（功能更全面，支持资源内联需求）。
2. 安装辅助插件：安装postcss-url来处理?inline参数，执行命令：

npm install postcss-url --save-dev

3. 修改Rollup配置：更新rollup.config.cjs，配置PostCSS和postcss-url识别并处理带?inline的CSS文件：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import postcss from 'rollup-plugin-postcss';
import postcssUrl from 'postcss-url';

export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: 'dist_rollup/lib-OB-ian.js',
                format: 'cjs'
            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            json(),
            postcss({
                extensions: ['.css'],
                plugins: [
                    postcssUrl({
                        url: 'inline', // 将匹配到的CSS内容内联到JS中
                        filter: '**/*.css?inline' // 仅处理带?inline后缀的CSS文件
                    })
                ],
                // 如果需要把不带?inline的普通CSS提取到单独文件，可开启以下配置
                // extract: 'dist_rollup/style.css'
            })
        ],
    }
]

4. TypeScript类型支持：为让TS识别带?inline的CSS导入，在项目中添加src/css.d.ts声明文件：

declare module '*.css?inline' {
  const content: string;
  export default content;
}

declare module '*.css' {
  const content: string;
  export default content;
}

或者在tsconfig.json中确保moduleResolution设置为bundler：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"]
}

完成以上配置后，再次执行rollup -c --bundleConfigAsCjs命令，即可正常打包，生成包含内联CSS的bundle文件。

内容的提问来源于stack exchange，提问作者Ian Noriega Nuñez