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?
I have been using Sass/Scss in my React applications by doing as create-react-app's documentation recommends, and everything works fine. All you need is:
npm install sass --save
Change your .css files to .scss.
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;