How to combine CSS modules to a single file in final build ?

[borislavone]

Summary

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

Is it possible to configure NextJS to not do this , but rather combine all modules into single css file ?

In case you are wondering why would I want this , using framer-motion with modular css creates some weird transitions during transition / animation.

Additional information

No response

Example

No response

[alexgilbertDG]

I was wondering the same thing, probably a webpack config inside next.config.js would work, I’m still searching for it !

[omerman]

Any news on this? Im also in search for a solution like this.

[stychu]

try in next.config

  webpack(config, { dev, isServer }) {
    if (!dev && !isServer) {
      // Optional: Improve CSS chunk splitting for FOUC mitigation
      config.optimization = {
        ...config.optimization,
        splitChunks: {
          ...config.optimization?.splitChunks,
          cacheGroups: {
            ...config.optimization?.splitChunks?.cacheGroups,
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true,
              priority: 200,
            },
          },
        },
      };
    }
    return config;
  }

[priyanshusinghchouhan]

Next.js doesn’t really give you an option to combine all CSS Modules into one big file. The reason is that it tries to keep things optimized — each page only loads the CSS it needs, which makes the app faster.

If you do want everything in a single file, there are a couple of workarounds:

=> Put the styles you need everywhere into a global CSS file (globals.css or imported in _app.js). That file will be bundled as one.
=> For animations (like with framer-motion), it usually helps to move those styles to global CSS instead of modules.
=> Another option is using Tailwind or styled-components, since they don’t split CSS the same way.

You can try tweaking Webpack to merge CSS, but it’s not officially supported in Next.js and can cause issues. Most people just handle shared/animation styles in global CSS and leave the rest split.