Next.JS using CSS Modules not working as expected

Question

I'm migrating my CRA to Next and having issues with locally scoped CSS modules.

File Tree

.
├── Headline.js
├── profile.png
└── welcome.module.css

Code

import React from 'react';
import "./welcome.module.css" 

function Headline() {
  return (
        <section className={'headliner-container'}>
          <div className={'main-headline'}></div>
        </section>
    );
}

export default Headline;

I realize I can get this to work by doing import styles from "./welcome.module.css" and referencing via className={styles["classNameHere"]}, but how does that scale for large migration projects? I want to use the CSS I had with minimal modification to my JSX.

Update:

I found out I could add this and disable all the weird opinions Next is throwing into my CSS structure:

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Any opposition to this in my next config?

CSS modules are supposed to be locally scoped and applied to their respective elements. From the docs, they export an object of classes that need to be applied to an element. When you use import "./welcome.module.css", then you're trying to make them global, which is anti-pattern. If you want global CSS, then you shouldn't use the module name, instead you should use: import "./welcome.css". — Matt Carlotta
– Matt Carlotta, Commented Oct 3, 2020 at 19:38
is it possible to locally scope without needing to update every location in the JSX with a styles["... prefix? — Ryan
– Ryan, Commented Oct 3, 2020 at 19:40
No. But again, the module name specifies a CSS module. In your current CRA project, the classes are being treated as global classes. — Matt Carlotta
– Matt Carlotta, Commented Oct 3, 2020 at 19:48
I think you're misunderstanding. Anyway, upon further testing, I noticed import "./App.module.css"; doesn't even apply styles with the CRA: screenshot. Only when importing and applying styles to the element does it work as expected: screenshot. This further points to the fact that, if it's working with .module.css in your CRA project, then you're just using global classes and not local classes. — Matt Carlotta
– Matt Carlotta, Commented Oct 4, 2020 at 3:25

Andrew Zheng · Accepted Answer · 2020-10-04 14:43:02Z

15

I ran into the same issue you had when I was migrating our UI component library. You might be able to do something like this. import styles from "./welcome.module.css". This allows you to do minimum work on the CSS side while still be able to leverage CSS Modules down the road.

:global {
 .headliner-container {
   margin: 0 20px;
 }
}

I do suggest you at least use a component scope class name on the top-level DOM node if possible so CSS override will less likely to happen. I don't know how pure CSS Module might handle it since I used Less for my situation.

import React from 'react';
import styles from "./welcome.module.css" 

function Headline() {
  return (
        <div className={styles.headLineWrapper}>
           <section className={'headliner-container'}>
             <div className={'main-headline'}></div>
           </section>
        </div> 
    );
}

export default Headline;

/*LESS code */
.head-line-wrapper {
  :global {
   .headliner-container {
     margin: 0 20px;
   }
  }
}

answered Oct 4, 2020 at 14:43

Andrew Zheng

2,8681 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sjahan Over a year ago

Thank you mate :) Pretty good answer, it diserves more upvotes :)

Ben Clayton Over a year ago

Hey there. I tried this and get the error Selector ":global" is not pure (pure selectors must contain at least one local class or id) - for this to work do I need to use the cssLoaderOptions in next.config?

Ben Clayton Over a year ago

I found a solution that worked for me - will post an answer

Ben Clayton Over a year ago

EDIT: I had a slightly different use-case so won't paste an answer. The syntax I used in the module.css file to override a global CSS class was this .override :global(.css-class-to-override) { /* rules */}. Then applying styles.override to the parent div's className did it.

Collectives™ on Stack Overflow

Next.JS using CSS Modules not working as expected

File Tree

Code

Update:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

File Tree

Code

Update:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related