在Webpack中配置purgeCss而不用工作箱弹出

时间:2020-07-22 16:44:13

标签: javascript reactjs webpack postcss css-purge

问题是工作箱配置返回重写,但puregeCss配置返回带插件的webpack对象。

我使用了工作箱插件,并且工作正常,然后尝试添加purge-css插件,但是我已经设置了工作箱插件,该插件返回来自module.export的替代信息。但是清除会返回webpack的对象。所以我无法为reactapp-rewired设置配置文件

工作箱的配置覆盖文件为


const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const { removeModuleScopePlugin } = require('customize-cra')

const {
  override
} = require("customize-cra");

function addWorkbox(config, env){
  config.plugins = config.plugins.map(plugin => {
    if (plugin.constructor.name === "GenerateSW") {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: "./src/sw.js",
        swDest: "service-worker.js"
      });
    }
    return plugin;
  });
  return config;
}


module.exports = override(
  removeModuleScopePlugin(),
  addWorkbox,
);


现在,我想在此config-overrides中添加purgeCss。

清除css文档中的示例如下


    module.exports = {
      override: override(removeModuleScopePlugin(), addWorkbox),
      plugins: [
        new PurgecssPlugin({
          paths: [
            resolveApp("public/index.html"),
            ...glob.sync(`${resolveApp("src")}/**/**/*`, { nodir: true }),
          ],
        }),
      ],
    };

但是覆盖无效。所以我尝试如下。


    module.exports = override(
      removeModuleScopePlugin(),
      addWorkbox,
      addPostcssPlugins([
        ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
      ])
    );

但是它抛出错误


    ./src/index.css
    Error: [object Object] is not a PostCSS plugin

如何设置清除CSS而不用工作箱弹出。

0 个答案:

没有答案