How to export multiple withCss withPwa, etc.. in next.config.js

[yaohuangguan]

const nextConfig = withPwa(
  {
    pwa: {
      dest: "public"
    }
  },
  withCSS(
    withSass({
      webpack(config, options) {
        config.module.rules.push(
          {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000
              }
            }
          },
          {
            test: /\.(ogg|mp3|wav|mpe?g)$/i,
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]"
            }
          }
        );
        return config;
      }
    })
  )
);
module.exports = nextConfig;

how can I export multiple statements like this, but with some configuration between them?

for example, I wanna use all these HOF and export them, but also I wanna add an object option in withPwa(), how should I do that? Compose those plugins!!!! without 3rd party libraries

Thanks in advance!

[yaohuangguan]

i think i fixed it by doing

withPwa(
  withCSS(
    withSass({
      webpack(config, options) {
        config.module.rules.push(
          {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000
              }
            }
          },
          {
            test: /\.(ogg|mp3|wav|mpe?g)$/i,
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]"
            }
          }
        );
        return config;
      },
      pwa: {
        dest: "public"
      }
    })
  )
);

[brianshano]

Good that you got it working,
I've also seen people using this to manage multiple plugins...
https://github.com/cyrilwanner/next-compose-plugins#readme