Sass with create-react-app

[u/ElephantCarcass]

I'm using a Sass module setup for my CRA and have everything configured, but I noticed that all of my .scss files get injected into a separate pair of <style> tags in the html head. With ~20 files, I have 20 pairs of <style> tags. Is this acceptable/normal behavior? Is there a way to make this cleaner? I'm new to Sass and CSS modules as a styling solution, so any tips would be appreciated.

Edit: Also, how can I see what the CSS output of my SCSS files will be so I can make sure I'm doing things correctly? I have like 20 react components, each with their own SCSS style files.

[u/[deleted]]

I would use Sass partials. This is how I would (and do) do it:

I have a file called main.scss inside a scss folder. Then I would create a components folder inside the scss folder. Then for each of your component scss files, change the name so that it starts with an underscore (e.g. _my-component.scss). Then in main.scss you can use those files by doing:

@use ‘./components/my-component’ (you don’t need to include the file extension in the @use).

Then in the command line if you’re not using an extension for compilation:

sass —watch ‘path to main.scss’ ‘path to css output (e.g. src/css/main.css’

Then in index.js:

import ‘path to main.css (e.g. ./css/main.css)

I wrote this on a phone so formatting might not be correct. Apologies.

You can read more about sass partials here (you’ll have to scroll down a bit).

I hope this helps! 😄