sass CSS Module Not Working

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!

[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.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.