How To Integrate SASS with React

SASS is a preprocessor that adds power to CSS and combination of it with ReactJS to build user interfaces gives you more power.

Here is how to achieve this 👇

Set up a React project

Assuming you have Nodejs and npm installed on your machine, you can create a new React project using the following command:

npx create-react-app my-app

This command sets up a new React project called "my-app" in a directory of the same name. Once the project is created, navigate into the project folder:

cd my-app

Install node-sass

Then, install the node-sass package using npm or yarn. This package allows you to compile SASS/SCSS files to CSS.

npm install -D node-sass

Create a Sass file

Next, create your SASS files with a .scss or .sass extension. For example, create a file named App.scss in the src directory.

/* src/App.scss */
$primary-color: #3498db;

.App {
  text-align: center;
  background-color: $primary-color;

  .App-header {
    background-color: darken($primary-color, 10%);
    height: 150px;
    padding: 20px;
    color: white;
  }
}

Import SASS Files in React Components

To use the Sass styles in your React components, you need to import the SASS file into your components. You can modify your App.js file to import the App.scss file. This allows you apply styles to the all components.

/* src/App.js */
import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React with SASS</h1>
      </header>
    </div>
  );
}

export default App;

Run the project

Start your React app to see the changes.

npm start

Your React app should now be using the styles defined in your SASS file. You can now leverage the full power of SASS in your React project, including variables, nesting, mixins, inheritance, and more.

Conclusion

SASS and React is a powerful combination to create user interfaces. By following steps above, you'll have a React application integrated with SASS, allowing for more powerful and maintainable styles.

Thank you for reading.