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

user_5793633 0
Viewed 734

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.

node-sass react-typescript reactjs sass css
2 Answers

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.

user_54968080

The practice is that we use CSS preprocessors like SASS or LESS to ease the development process. browsers do not understand them. we have two ways to compile them into CSS files:

  • Using task runners like Gulp and Grunt or bundlers like Webpack(with proper loaders).
  • Compile them by hand using software like Koala(not recommended in development process)

if you are using Webpack or other bundlers, all you have to do is to import sass files, add proper loader(sass-loader in case of Webpack), and let Webpack do the rest for you. Webpack will take care of compiling and bundling.

user_45083950
Related