Next.js: How to use with-external-scoped-css example with SCSS

[aviramga]

Hi,

I'm working with the with-external-scoped-css example and would like to covert the sass to scss. I've updated the .bablerc file to include scss but the bundle.css appears to be empty.

Could someone please help me with the exact steps to convert it to scss?
I've already looked at the other css related examples (including the global one) but I would really like to keep the scoped css solution.

Im using Next v4-beta.4
Thanks for the help!

[timneutkens]

cc @guidiego

[guidiego]

@aviramga did you change the pre-processor.js??

https://github.com/zeit/next.js/blob/7c908633cbdfcd158bf50c60cee16474948efdbd/examples/with-external-scoped-css/.babelrc#L3:L12

You can remove this line: "preprocessCss": "./pre-processor.js" or change the indentedSyntax: true to false!

[aviramga]

Works!!! THANK YOU! @guidiego !

Can you please explain why this works? I hate it to stay in the "magic" level :)

Also, I cannot use fixed class names? (i.e className="some-class" ) and just use the same class name in my scss file?

[timneutkens]

Going to close this, but @guidiego can most likely explain 😄

[aviramga]

Cool thanks! @guidiego please help :)

[timneutkens]

@aviramga Also be sure to join https://zeit.chat 😄

[guidiego]

@aviramga Gonna go in parts:

This example works with any pre-processor, the pre-processor.js file is used as a parser for you .anything files :)

The babel-plugin used to make this example works fine with SCSS and LESS without a necessity to create/use the pre-processor.js file, at least, I prefer to create this example to illustrate the possibility to make complex things. So this works because SCSS is the base language (as less) of this plugin :D When you remove the pre-processor and add the .scss files in pattern this will work as you expect. The other approach (indentedSyntax: true), is because the sass-core use it to understand if you want to work with a processor based on indent (sass) or the default (scss).

Also, I cannot use fixed class names? (i.e className="some-class" ) and just use the same class name in my scss file?

Yeap, for what I remember (I use some plugins) you can add a :global{ ... } in it and add it to the processor to be appended with the other stuff 🤔

CC: @timneutkens I opened a PR for link this issue in my example with a better explanation :)

[aviramga]

Thanks @guidiego for the amazing explanation!

Where did you get the :global tip from? Also, is there a way to fix the hot-reload issue?

[chhuang]

@aviramga :global is from CSS Modules.

:global switches to global scope for the current selector respective identifier.

Maybe we need an example without CSS Modules.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.