How to Use SCSS With React Applications

With every passing year, web applications are becoming more and more sophisticated. This is true for their functionality as well as appearance.

Almost all businesses understand the importance of their internet presence, so they are willing to develop websites with great designs.

To develop beautiful websites, developers need to develop and maintain templates that include information about what the application will look like. For example, it might specify primary and secondary colors and similar important values for designing the application.

All of this can be achieved with regular CSS, but it’s easier to use SCSS, which extends upon all the basic functionalities of CSS to manage templates more efficiently. React is also one of the most common libraries to develop the UIs for modern applications.

In this article, we want to explore how to use SCSS with React.

Use SCSS With Create-React-App in React

The easiest way to use SCSS in React is to create a create-react-app project. It contains a webpack file configured to allow you to compile SCSS files.

According to the official create-react-app documentation, first, you must use package managers like npm or yarn to install the sass package. Then you can proceed to change the file extension of your stylesheets from regular style.css to style.scss.

Any file imported within the files of the Create-React-App application will be automatically compiled into regular CSS.

Let’s take a look at an example.

import "./styles.scss";
export default function App() {
  return (
    <div className="App">
      <h1>Hello, World</h1>
    </div>
  );
}

When you import the styles.scss file, any SCSS-specific features will be automatically compiled.

Suppose you want to import and use SCSS files outside of the create-react-app project. You’re going to need to set up a webpack file to configure the rules for compilation.

To learn more, read this tutorial on dev.to.