CODEWITHSUNDEEP
javascriptreactjsnext.jsfrontendmini-css-extract-plugin
amin71
amin71

Reputation: 99

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

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

Upvotes: 5

Views: 3628

Answers (2)

David Sainez
David Sainez

Reputation: 6956

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

Upvotes: 1

Anapuram Saikumar
Anapuram Saikumar

Reputation: 21

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

Upvotes: 2

Related Questions