What's the best way to add add sass/scss in a React app?

Question

I found the create-react-app docs recommends to use node-sass but the package in npm is saying that LibSass and Node Sass are deprecated. So if any one can help what's the best way to install sass in a React project?

Answer 1

I have been using it in my React applications by doing as Create React App's doc recommends, and everything works fine. All you need is:

1. First open your project terminal, stop your development server and run:

npm install sass

2. Change your .css files to .scss and updates your imports:

import './index.scss';

3. Restart your development server and you are good to go:

npm start

Answer 2

this seem to work for me

npm install sass

page-heading.scss

.page-heading {
  border: 3px solid red;
  width: 100%;
  &__divider {
    border: 3px solid blue;
  }
}

PageHeading.js

import { Typography, Divider } from '@mui/material';
import 'components/page-heading/page-heading.scss';

function PageTitle({ props: pageHeading }) {
  console.log(pageHeading);
  return (
    <Typography component="h1" variant="h2" className="page-heading">
      <Divider
        sx={{
          hyphens: 'auto',
          whiteSpace: 'normal',
        }}
        className="page-heading__divider"
      >
        {pageHeading}
      </Divider>
    </Typography>
  );
}

export default PageTitle;

https://www.npmjs.com/package/sass