How to install SCSS Preprocessor on create-react-app (CRA) TypeScript project

CSS Preprocessors - Sass/SCSS

Cascading Style Sheets (CSS) is core functionality in HTML and is most known for working with HTML in particular and React specifically. However, on large projects, CSS Preprocessors are often used to complement CSS and add functionality.

In terms of CSS Preprocessors, four main CSS Preprocessors are often used with React projects: Sass/SCSS, PostCSS, Less, and Stylus.
Note Cascading Style Sheets (CSS) are used to represent the visual layout of the webpage on different devices. CSS Preprocessors are often used to enhance CSS functionality.

The quick answer is that Sass/SCSS has the upper hand for the majority of today’s projects and that’s what we will be using.

Install with yarn;
$ yarn add -D node-sass

Just like CSS, if we want to use SCSS Modules in TypeScript the same way we would use them in JavaScript, we need to install Webpack’s loader for Sass/SCSS it’s called scss-loader.

Since we are using TS. We need a replacement for the ‘scss-loader‘ that works with TS and generates typings for Sass/SCSS. To install the loader with yarn, type this command:

$ yarn add -D scss-loader typings-for-scss-modules-loader

Take the Digital Course & Get 40 Pages React Book

Get Free React 17 Book Chapter

View the article on Medium

Learning React?