错误：[object Object] 不是 PostCSS 插件

Question

这是我在 rollup.config.js 文件中的 postcss 配置代码：

const postcssUrlOpts = [
    {
        url: 'copy',
        filter: /\.woff$/,
        assetsPath: 'font'
    }
];

const postcssOpts = {
    extract: 'index.css',
    plugins: [
        postcssUrl(postcssUrlOpts)
    ]
};

这是我得到的日志：

Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/.../node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:130:15)
    at new Processor (/.../node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:38:25)
    at postcss (/.../node_modules/rollup-plugin-postcss/node_modules/postcss/lib/postcss.es6:34:10)
    at /.../node_modules/rollup-plugin-postcss/dist/index.js:213:28
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/.../node_modules/rollup-plugin-postcss/dist/index.js:19:24)
    at _next (/.../node_modules/rollup-plugin-postcss/dist/index.js:41:9)

如果没有 postcssUrl 插件，我在 javascript 文件中的所有 css 导入都可以正常工作，一切都很好，但是当我将此插件添加到 postcss 插件列表时，我在控制台中收到此错误。 任何其他插件，如 tailwindcss 插件都可以正常工作。

版本：

postcss: ^8.1.10
postcss-url: ^10.1.1

Answer 1

plugins数组的元素应该是函数。 您立即调用 function 并返回 object。 将 function 调用包装在 function 中。

const postcssOpts = {
    extract: 'index.css',
    plugins: [
        () => postcssUrl(postcssUrlOpts)
    ]
};