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

Anapuram Saikumar · Accepted Answer · 2023-02-03 08:55:19Z

2

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

answered Feb 3, 2023 at 8:55

Anapuram Saikumar

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DSDmark Over a year ago

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.

David Sainez · Accepted Answer · 2023-02-17 22:03:11Z

1

@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".

answered Feb 17, 2023 at 22:03

David Sainez

7,0863 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related