I am trying to scope some styles as they are only used in this component.Here is what I am doingâ€¦journal/[slug]/page.jsximport styles from '../../../src/styles/components/journalSingle.scss'; return ( )src/styles/components/journalSingle.scss.journalSingle { padding-block-start: 8.75rem; padding-block-end: 0rem; @media screen and (min-width: 768px) { padding-block-start: 14.875rem; } }Returned HTML Not really sure what I am doing wrong?

Styles return undefined

Answered

Masai Lion posted this in #help-forum

Masai LionOP

2023-09-13T20:09:49.000Z

I am trying to scope some styles as they are only used in this component.

Here is what I am doingâ€¦

journal/[slug]/page.jsx

import styles from '../../../src/styles/components/journalSingle.scss';

return (
  <article class={`${styles.journalSingle} flow-l`}>
  </article>
)

src/styles/components/journalSingle.scss

.journalSingle {
  padding-block-start: 8.75rem;
  padding-block-end: 0rem;

  @media screen and (min-width: 768px) {
    padding-block-start: 14.875rem;
  }
}

Returned HTML

<article class="undefined flow-l"></article>

Not really sure what I am doing wrong?

Answered by riský

[scss module](https://nextjs.org/docs/app/building-your-application/styling/sass) is the same concept as [normal css module](https://nextjs.org/docs/app/building-your-application/styling/css-modules) - ie doing what you want

View full answer

16 Replies

riský

2023-09-13T21:21:05.000Z

https://nextjs.org/docs/app/building-your-application/styling/css-modules: only module.css can be imported directly to a style of a tag/component, normally when importing it just makes the values global for all in the page

Asian black bear

2023-09-13T23:01:05.000Z

tl;dr rename journalSingle.scss to journalSingle.module.scss

also in React it is customary to use the prop className= instead of class=

riský

2023-09-14T00:40:15.000Z

~~I don't know if there are module scss tho...~~

But the className part I am amazed that it worked (but yeah should fix)

Asian black bear

2023-09-14T01:22:39.000Z

@riský I am not sure about the builtin support, but I have personally used CSS modules with SCSS, so it definitely exists.

Asian black bear

2023-09-14T01:27:48.000Z

You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

https://nextjs.org/docs/app/building-your-application/styling/sass

riský

2023-09-14T02:48:45.000Z

I didn't see it on the CSS module page, that's all, but nice to know ðŸ™‚

Asian black bear

2023-09-14T04:06:00.000Z

I agree they really should mention it on the page about modules

Masai LionOP

2023-09-14T07:14:43.000Z

Thanks for the responses. class not className is just a typo here but thanks for pointing out. So is there no way of scoping this little chunk of SCSS to the component?

@Asian black bear > You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension. https://nextjs.org/docs/app/building-your-application/styling/sass

riský

2023-09-14T07:17:07.000Z

Masai LionOP

2023-09-14T08:08:49.000Z

Thanks again, the Next article doesn't explain what is actually happen here. Adding module to .scss just looks like a naming convention, but I suspect it does more. What does module actually do?

riský

2023-09-14T08:24:09.000Z

Answer

riský

2023-09-14T08:24:47.000Z

and it isn't just a naming convention because nextjs does things when it is there...

@Masai Lion Thanks again, the Next article doesn't explain what is actually happen here. Adding module to .scss just looks like a naming convention, but I suspect it does more. What does module actually do?

Asian black bear

2023-09-14T09:31:51.000Z

It has a special rule in Webpack to tell the css/scss loader to treat it as a module file.

riský

2023-09-17T05:49:21.000Z

@Masai Lion just checking, do you understand how scss modules work/ is your original issue solved?