Next.js: sass CSS Module Not Working

[cbonaco1]

Bug report

Describe the bug

I am trying to use a sass CSS module, however I do not see the styles taking effect on the page.
I followed instructions both here:
https://nextjs.org/blog/next-9-3#built-in-sass-css-module-support-for-component-level-styles
and here:
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css
however the styles do not take effect.

To Reproduce

• Install sass
• Create a file [name].module.scss
• Import that file from inside the component [name]
• Add styles.[className] to the className prop

./components/Header.module.scss

.header {
    border: 1px solid red;
    height: 4.0rem;
    background-color: #fff;
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.16);
}

./components/Header.tsx

import style from "./Header.module.scss";
export default function Header() {
  return (
    <div className={style.header}>
      <p>Logo</p>
    </div>
  );
}

next.config.js

module.exports = {
  poweredByHeader: false
};

Expected behavior

I expect the Header component to have the styles applied.

System information

• OS: macOs
• Browser: chrome
• Version of Next.js: 9.3.1
• Version of sass: 1.26.3

Additional context

In the dev tools, I see the random class name assigned to the component:

however the ''header" class is not applied, and even if i add the class manually in the dev tools, i do not see the styles applied.

Any guidance here is much appreciated!

[timneutkens]

I can't reproduce this, tried locally with the exact steps provided. Please provide a full repository.

[kelvindecosta]

I have faced a similar issue in the past. Can you share the output of console.log({style})?

import style from "./Header.module.scss";
+ console.log({style})
export default function Header() {
  return (
    <div className={style.header}>
      <p>Logo</p>
    </div>
  );
}

Ideally, style.header should contain a String.

[cbonaco1]

I currently am no longer facing this issue. I logged style object and style.header is in fact a string. Several updates have been made to my project since i reported this issue, so it's difficult to track down what fixed it. I'll close this issue and re-open if I come across it again.

[fahimermo]

@cbonaco1 Can you see what fixed your issue?

[cbonaco1]

@fahimermo it's hard to say since a few months have passed since I reported the issue. I'm not a huge fan of "it's suddenly working now" as a resolution, but I am also no longer actively working on the project so it's difficult to pinpoint it to something.