Extracting all CSS in a single file in Nextjs using mini-css-extract-plugin

Question

I'm using Nextjs and for style, Sass is used. In production mode, I see a lot of css files that are loaded in a sequential manner. I want to load just one css. After some search, I find MiniCssExtractPlugin that can be useful and use in next.config.js. I don't know how to use it. can anyone help me?

const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

// next.js configuration
const nextConfig = {
  images: {
    domains: ['ibexcdn.com'],
  },
};

module.exports = withPlugins(
  [
    [
      nextTranslate,
      {
        webpack: (config, { isServer, webpack }) => {
          return config;
        },
      },
    ],
    withBundleAnalyzer,

    [
      withPWA,
      {
        pwa: {
          disable: process.env.NODE_ENV === "development",
          dest: 'public',
          runtimeCaching: [
            {
              urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
              handler: 'NetworkFirst',
              options: {
                cacheName: 'static-font-assets',
                expiration: {
                  maxEntries: 4,
                  maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
                }
              }
            }
          ]
        },

      },
    ],
  ],
  nextConfig,
);

in the documentation of mini-css-extract-plugin, use these codes

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

but I don't know how to add these codes in my next.config.js file

score 2 · Answer 1 · answered Feb 03 '23 at 08:55

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.optimization = {
      ...config.optimization,
      splitChunks: {
        cacheGroups: {
          styles: {
            name: "styles",
            type: "css/mini-extract",
            chunks: "all",
            enforce: true,
          },
        },
      },
    };
    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: "static/css/[name].[contenthash].css",
      })
    );
    config.module.rules.push({
      // test: /\.css$/,
      // use: [MiniCssExtractPlugin.loader, "css-loader"],
      test: /\.(scss|less|sass|css)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    });
    return config;
  },
};

module.exports = nextConfig;

Please try above code. it works for me

It's important to not just post code, but to also include a description of what the code does and why you are suggesting it. This helps others understand the context and purpose of the code, and makes it more useful for others who may be reading the question or answer. — DSDmark, Feb 05 '23 at 08:55

score 1 · Answer 2 · answered Feb 17 '23 at 22:03

@Anapuram's answer is exactly correct.

Next -as you can imagine- ships with a custom webpack configuration. You can modify this custom webpack configuration in Next's config file: next.config.js.

You can take a look at the documentation.

In particular the webpack property gives you a function with a config object you can modify. Make sure not to nuke the existing fields: use push and the ... operator instead of direct assignment.

The biggest adjustment you have to make will be to change the filename to find the css files in Next's build directory: filename: "static/css/[name].[contenthash].css".

Extracting all CSS in a single file in Nextjs using mini-css-extract-plugin

2 Answers2