scss id wont work

[zackfalcon]

When i want to apply id style with exemple:

#title-break { display: inline; }

It actually wont work does any configuration is needed ?!

Example screen : https://image.noelshack.com/fichiers-md/2020/19/4/1588868666-capture-d-ecran-de-2020-05-07-12-24-07.png

[zackdotcomputer]

Could you give a little more context? Where are you applying that style (in a .module.scss file or in a .scss global file that you're important in a custom _app) and what does your component look like that's trying to use it?

[zackfalcon]

Hey ! Thanks for your answer here is a simple example : https://image.noelshack.com/fichiers-md/2020/19/4/1588868666-capture-d-ecran-de-2020-05-07-12-24-07.png

[zackdotcomputer]

Based on the screenshot you sent, you're not using the right syntax for id from modules. You can see more at this issue in the css-modules lib.

The tldr; is that you have to declare :global(#textContent) instead of what you have. Otherwise, the module will add a unique namespace suffix to the id and your DOM will not match it.

[zackdotcomputer]

I think you might have a misunderstanding around what style modules do and that is leading to your confusion here. Modules behave very differently from normal .scss files, such as those supported by CRA out of the box.

Inside of each style module file, every class or id selector that isn't inside of a :global(...) will be compiled into a new name that will be unique per file. That means that, for this example, the .content selector in TestComponent.module and the .content selector in SecondComponent.module are completely different. This is why your styles in SecondComponent aren't matching - they expect to be wrapped inside of SecondComponent.content, not TestComponent.content.

Put another way, styling inside of a .module.scss file can never reference styling declared inside of a different .module.scss file (unless the selectors are wrapped in :global(...) in BOTH places). I think what you're trying to do is use normal SASS, in which case you should move this styling out of modules and into normal .scss files that you import in your pages/_app.tsx file. Then you will not have this problem.

[zackfalcon]

it's not possible to import .scss style outside _app.tsx in other file ?.

[zackfalcon]

Thanks a lot for this answer i understand a lot know !

[zackdotcomputer]

Unforunately no, you can't import a .scss style outside of the _app.tsx file. That's how Next enforces those styles being globally available.

Glad to have helped!

[zackfalcon]

Thanks a lot great explanation ! Have a nice day !