Integrating Sass in NextJS

Why Sass

What it really came down to was Sass vs. CSS Modules...

I have experience working with LESS; the other CSS preprocessor that is in many ways exactly the same, and I like working with it. Over the past few years however, Sass has become the more popular choice for CSS preprocessing and would like to build up some experience with it.

I don't have much experience with React yet, but what absolutely appeals to me is the modular architecture of components. There is however a small caveat with using modular CSS in NextJS.

CSS Modules

You can't just import stylesheets directly in components you can only do this inside your _app.js. NextJS provides some documentation on using CSS Modules (also in combination with Sass) and this also appears to be the recommended way to deal with component specific styling.

Unfortunately, I just don't care for how this works inside the component, nor about the final output.

As a matter of fact, I find it difficult to understand what exactly the point is of CSS Modules, or CSS-in-JS. I feel like there must be some huge performance benefit for large scale projects or something but I don't quite understand how.

Articles around the interwebs discuss the benefits of local scope: you don't have to worry about CSS unintentionally affecting other parts of your website. Honestly, scope has ever been a big problem for me. Admittedly, I used to go a bit overboard nesting selectors when I first discovered preprocessors, but I feel BEM has solved this issue sustainably.

I'm also confused as to how scoping is supposed to reduce CSS bloat, it seems like you're creating tons of classes that might do very similar things.

I'm probably missing something, but in regards to CSS I'm going to stick to what I know and what I am comfortable with.

What I really want...

I have a pretty good idea of what my ideal way of working with CSS looks like:

• I have a global stylesheet that defines my root variables, does my css-reset, sets some core styling and contains utility classes.
• For each component I would like a separate file that contains BEM-style CSS for that specific component.
• I would like to use Sass with SCSS syntax for everything.
• Ideally I would want to be able to use Sass functions across all files...
• The pages that are statically generated by NextJS would load my global stylesheet and also the stylesheets belonging to the components on that page. This would ensure that I only load necessary CSS when users first visit my website. The rest of the component styles are loaded in as they navigate.

Unfortunately this doesn't seem possible out-of-the-box and I'm afraid that at the time of writing I do not posses the necessary skills to make this possible myself. Also, I am sure NextJS works the way it does for very good reasons, reasons that currently elude me.

Moving on

After experimenting a bit with CCS Modules I decided not to go forward with it. I am going to use individual files to style components. I keep all my components in their own folder and I store the "component.scss" file along with it. Since I can't import those styles inside the component itself I will import them into my global stylesheet directly.

Including them from their component folder feels a bit awkward but it's a workable solution. The real compromise is that my global stylesheet will contain some styling that will not be used on the page the user first visits.

In regards to performance it probably won't matter all that much. All things considered, this is not that large a project. At the same time, this project is intended to be a learning opportunity so I also want to do the best job theoretically possible.

For now I believe I have found a suitable compromise between performance and ease of development.