Which files should be imported in react tsx if we are using SASS?

Question

I am a bit confused with using SASS/SCSS in a react typescript project. I found an article saying how SASS/SCSS can be used in react project: https://create-react-app.dev/docs/adding-a-sass-stylesheet Although it seems importing .scss files in .tsx component files works perfectly fine, like this:

import './component-1.scss';

but then what about building the scss files and compiling them to css? why do we need that if a browser can understand the scss files. or am I understanding wrong here? if compiling scss files are necessary and we should import compiled css files in the component like:

import './component-1.css';

then how will I achieve this prior to compile because there will only be scss files present in the directory.

Answer 1

The browser doesn't understand SCSS. When your application is built, the SCSS is converted to CSS. Those SCSS file imports basically get transpiled into your application to importing regular old CSS, which the browser then uses.

The code in your source files is not indicative of what the output of your build process looks like. In the same way that we can write our React files using JSX, but that's converted into regular old JS when we build the app, because the browser doesn't understand JSX.