Non-module component styling

[genesisneo]

Hi, I am new to Next.js and I am having some issues on component level styling.
So I have this component called Card.js with style Card.scss.

📦 ./component/Card/Card.js

import './Card.scss';
const Card = () => (
  <div className="Card">
    <div className="Card-title">Title</div>
    <div className="Card-body">Body...</div>
  </div>
);
export default Card;

🎨 ./component/Card/Card.scss

.Card {
  background-color: red;
  color: white;
  &-title {
    background-color: green;
  }
  &-body {
    background-color: blue;
  }
}

If I use the module approach, everything works fine.

import styles from './Card.module.scss';
...
  <div className={styles.Card}>
    <div className={styles['Card-title']}>Title</div>
...

However, If I don't use *.module.scss, I am getting this error message.

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

My question is, is there a way for us to import styles not as a module to a component? Thank you.

[jamesmosier]

Unfortunately currently there is no way to do this. A primary reason would be that Next would not know what order to combine your individual stylesheets in, leading to unexpected results.

[stefanmatar]

@websocket98765 did you find a solution to your problem?

[Kirsten1996]

@genesisneo will this ever be cards for next?

[genesisneo]

@Kirsten1996 I am not sure, but afaik @websocket98765 can fix this issue
though is there no update if he sent a PR for it? 🤔
I will unmark the answer to get some proper updates 🤞

[frattaro]

The order of imports is not next's problem. BEM is a valid solution to this issue.

[FrameMuse]

Take a look at this solution:
https://stackoverflow.com/a/74031340/12468111

[AmanMinhas]

This is such a huge problem.

Also, even if you use module to import your component style, it is such a pain to update those style from parent for different use cases.

For example, if you just want to modify style of a button in About Page specifically, you would generally want to do something like this -

Component :-
  Button.js
  Button.module.js 
    .c-Button {
      padding: 12px;
    }

Page :-
  About.js
  About.module.scss
    .p-About {
      .c-Button {
        padding: 24px;
      }
    }

But if you use modules, it is hard to reference .c-Button from inside .p-About without using :global which gets messier by the second.
This is making migration to Next from CRA a nightmare.

Now that my rant is over, I would also genuinely appreciate viable solutions to this.

[Kirsten1996]

I'm sure this will be a big help for those of you who are migrating over from CRA. This is if you'd like to use normal string classes

eg. className='example'

I'm also able to import my global styles into my component level stylesheets, you can checkout my repo (install my packages for webpack and sass packages and checkout my next.config.js)

https://github.com/Kirsten1996/nextjs-component-level-styling

[Jaynam07]

Any solution - old Proj has all files in scss/sass and while upgrading to next js 11, it requires modules styles, migrating each and every file for a large scale project is being difficult

What can be done in this case?

[frattaro]

I ended up working around this terrible decision by fixing the webpack config:

  webpack: (config) => {
    let oneOfRules = config.module.rules.find((x) => x.oneOf).oneOf;

    // remove the webpack rule to error on global css/scss
    oneOfRules = oneOfRules.filter(
      (x) => x.issuer || !x.use || x.use.loader !== "error-loader"
    );

    // modify the webpack rule targeting only *.module.scss to target only *.scss
    const newScssRule = oneOfRules.find(
      (x) => x.test && x.test.toString() === /\.module\.(scss|sass)$/.toString()
    );
    newScssRule.test = /\.(scss|sass)$/;
    newScssRule.sideEffects = true;

    if (newScssRule.use[0].options.modules) {
      newScssRule.use[0].options.modules = false;
    }

    if (newScssRule.use[1].options.modules) {
      newScssRule.use[1].options.modules = false;
    }

    config.module.rules.splice(
      config.module.rules.findIndex((x) => x.oneOf),
      1,
      {
        oneOf: oneOfRules
      }
    );

    return config;
  }

[cwtuan]

After adding this config, global style doesn't work anymore.

Do you know how to fix it?

[frattaro]

Not sure - I assume the webpack config changed in a more recent version of next.

Not long after I posted this I switched jobs and there we used MUI and I picked up emotion (css prop), which I've really been enjoying. Still disagree wholeheartedly with the reasoning for the lack of non-module scss support.

[staghouse]

Nothing above has worked for me.

I want to use component-level scss for each component that is split in to and loads when the component exists on the page. I dont want to use CSS-in-JS or CSS Modules. I realize Next doesnt support this but is there a work around anyone has found?

[cwtuan]

@staghouse do you try my solution? It works for me in next.js v12.3.1.

[staghouse]

I did but the CSS does not load at all. No network calls to any chunks. No global styling. Nothing. @cwtuan

[cwtuan]

The latest method to disable css-module in Next.js is as following:

Edit next.config.js:

webpack(config) {
    // disable css-module in Next.js
    // source: https://github.com/vercel/next.js/discussions/14672#discussioncomment-4027237
    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;
  },

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

See example: No CSS modules in next.js app: (json5 app)

[Traevelliath]

Hey, is there any way to disable css modules in NextJs 13?

[cwtuan]

See #14672 (comment)
It also works in next@13.

[Traevelliath]

I got ReferenceError: __dirname is not defined

[cwtuan]

__dirname is an environment variable in node.js. Try to use node.js > 16

[morekid]

This is indeed an issue when migrating to Next from a codebase that accepts component level styles such as Remix (my use case).

The solution above works for me, however TypeScript complains: Cannot find module './some-comp.scss' or its corresponding type declarations..

Just in case it helps anyone, I also have to explicitly call the imported style in the main component export, even just simply like so:

import styles from "./some-comp.scss";

export default function SomeComp() {
  styles; /* loads styles */

  return(
    ...
  )
}

[cwtuan]

how about this?

import from "./some-comp.scss";

[teerzo]

Any updates surrounding this?
currently using the work around, but this seems like something that will stop working eventually