CSS Modules not applying style - next.js 13

Question

Using next.js 13.1.1 with /app

I've been doing all of my styles through a global.css up until now, but I'm trying to migrate them into CSS Modules.

In my root layout.js, I have a Header component that imports from ./header.js. This works fine with global.css.

I've made a module ../styles/header.module.css, and I import it into ./header.js with import styles from "../styles/header.module.css";, but then when I try to use it, for example with <h1 className={styles.big_title}>, none of the CSS is applied.

Any help would be much appreciated, I've been trying to fix this for hours. No errors occur, the CSS just doesn't apply.

// ./layout.js

import Header from "./header";
import Footer from "./footer";

import "../styles/global.css";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
          <title>SB-Wiki</title>
      </head>
      <body>
          <Header />
          <main>
              {children}
          </main>
          <Footer />
      </body>
    </html>
  );
}

/* ../styles/header.module.css */

.big_title {
    color: red;
}

// ./header.js

import styles from "../styles/header.module.css";

export default function Header() {
    return (
        <header>
            <p className={styles.big_title}>Test</p>
        </header>
    )
}

The styles display if I add import styles from "../styles/header.module.css"; to the top of a page.js but that rather defeats the point of having a root layout.js as the framework is designed this way.

score 0 · Answer 1 · answered Dec 31 '22 at 10:34

The problem is with next.js . You need to create config file for next.config.js in order to properly support your CSS .

module.exports = {
   cssModules: true,
     cssLoaderOptions: {
   importLoaders: 1,
  localIdentName: "[]",
 },
};

The config file will tell the next.js to treat your CSS files as CSS

score 0 · Answer 2 · edited Aug 21 '23 at 04:25

0

I don't know if the problem persist for you actually, but I created a similar application in Sandbox with your setup, and its worked perfectly as expected without any additional next.js configurations.

edited Aug 21 '23 at 04:25

starball

20,030
7
43
238

answered Aug 20 '23 at 23:19

Philipe Almeida

11
3

ujjwal · Answer 3 · 2022-12-31T10:25:24.707

-1

You can use it like this styles["big_title"]

// ./header.js

import styles from "../styles/header.module.css";

export default function Header() {
    return (
        <header>
            <p className={styles["big_title"]}>Test</p>
        </header>
    )
}

edited Dec 31 '22 at 10:25

answered Dec 31 '22 at 10:17

ujjwal

79
6

CSS Modules not applying style - next.js 13

3 Answers3