javascript - How to turn off CSS module feature in Next.js? - Stack Overflow

admin管理员组

文章数量:1245823

Next.js only allow to import Global CSS in _App.js. But we can't import global CSS in every ponent , 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 :

Next.js only allow to import Global CSS in _App.js. But we can't import global CSS in every ponent , 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/docs/messages/css-global

• javascript
• css
• reactjs
• next.js
• server-side-rendering

Share Improve this question Follow asked Jun 11, 2021 at 9:25 user14384267user14384267 16311 silver badge88 bronze badges 4

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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

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

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

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

To disable css-modules ponent 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 ponent 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

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;
  },

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

本文标签： javascriptHow to turn off CSS module feature in NextjsStack Overflow