How to turn off CSS module feature in Next.js?

Question

Next.js only allow to import Global CSS in _App.js. But we can't import global CSS in every component , for that we have to use CSS module as per the restriction by Next.js.

Now I am migrating a large project to Next.js and it is very difficult to convert css of of every module to CSS modules. is there any ways to remove this restriction ?

Restriction Docs Link : https://nextjs.org/docs/messages/css-global

When you import global CSS all your components make use of it. So in your case you don't have to include them again in every single component. — Lingertje, Jun 11 '21 at 09:29
@Lingertje I want to migrate a large project to Next.js . And In my current project I have SCSS correspondingly to every component and I am using BEM model. so My project is completely modularize without CSS module. Migrating to CSS module require change in every component and that is what I want to avoid. — user14384267, Jun 11 '21 at 10:30
You can for now include all your SCSS correspondingly to every component in your main.scss. Then use that main.scss as global CSS in your `_app.js`. — Lingertje, Jun 14 '21 at 12:37
Yes, I know that. But I want to import component specific SCSS in that particular component only and without using CSS module. — user14384267, Jun 15 '21 at 04:26

score 1 · Answer 1 · answered May 19 '22 at 07:03

I hope answering this does not find us late. You can actually tamper with the Webpack configuration by editing the next.config.js file like the following:

const path = require('path');

const nextConfig = {
  webpack(config) {
    // if not work, try `config.module.rules[2]...`
    config.module.rules[3].oneOf.forEach((one) => {
      if (!`${one.issuer?.and}`.includes('_app')) return;
      one.issuer.and = [path.resolve(__dirname)];
    });
    return config;
  },
};

module.exports = nextConfig

Here is the reference: Disable CSS Modules in Next.js project

iamkirill · Answer 2 · 2022-11-15T16:53:02.163

For some obscure reason, @vially solution kept exiting the server, although it did found the _app substring.

Therefore, I slightly modified it and fixed my problem. Also, no more guessing the index.

const path = require('path')

const nextConfig = {
  // other settings...
  webpack (config) {
    // loop over all rules and find the ones with `oneOf` key
    config.module.rules.forEach(rule => {
      if (!rule.oneOf) return

      rule.oneOf.forEach(one => {
        if (!`${one.issuer?.and}`.includes('_app')) return
        one.issuer.and = [path.resolve(__dirname)]
      })
    })
  },
}

module.exports = nextConfig

Or, if you don't want to continue search after you found the substring, replace main forEach with for loop and track success in a variable. Once you found the substring, update the variable and loop will exit.

const path = require('path')

const nextConfig = {
  // other settings...
  webpack (config) {
    let hasFound = false

    for (let i = 0; i < config.module.rules.length; i++) {
      const rule = config.module.rules[i]

      if (!rule.oneOf) continue

      rule.oneOf.forEach(one => {
        if (!`${one.issuer?.and}`.includes('_app')) return
        one.issuer.and = [path.resolve(__dirname)]
        hasFound = true
      })

      if (hasFound) break
    }
  },
}

module.exports = nextConfig

score 0 · Answer 3 · answered Sep 28 '22 at 03:07

i search in medium, and i found the answer for your question.

const path = require('path');

module.exports = {
  webpack(config) {
    // if not work, try `config.module.rules[2]...`
    config.module.rules[3].oneOf.forEach((one) => {
      if (!`${one.issuer?.and}`.includes('_app')) return;
      one.issuer.and = [path.resolve(__dirname)];
    });
    return config;
  },
};

I hope this answer can help you

score 0 · Answer 4 · answered Dec 26 '22 at 12:54

To disable css-modules component styling in Next.js,

In the next.config.js, add the following config:

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  // disable css-modules component styling
  webpack(config) {
    config.module.rules.forEach((rule) => {
      const { oneOf } = rule;
      if (oneOf) {
        oneOf.forEach((one) => {
          if (!`${one.issuer?.and}`.includes('_app')) return;
          one.issuer.and = [path.resolve(__dirname)];
        });
      }
    })
    return config;
  },
}

module.exports = nextConfig

Verified in next.js version: v12.3~v13.x

score 0 · Answer 5 · answered Apr 06 '23 at 05:45

For Nextjs 13, I think this solution is more error safe:

webpack(config) {
    const oneOfRule = config.module.rules.find((rule) => rule.oneOf);
    if (!oneOfRule) return console.log('Unable to find css module rule to disabled it');
    oneOfRule.oneOf.forEach((one) => {
      if (!(one.issuer && one.issuer.and && `${one.issuer.and}`.includes('_app'))) return;
      one.issuer.and = [path.resolve(__dirname)];
    });
    return config;
  },

score -1 · Answer 6 · answered Apr 20 '22 at 18:53

-1

Try to remove custom CSS configurations like -@zeit/next-css -@zeit/next-sass in your next.config.js

answered Apr 20 '22 at 18:53

Giacomo Titton

1

How to turn off CSS module feature in Next.js?

6 Answers6