score:3

Accepted answer

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:

  1. step one
npm install sass --save
  1. step two

change your .css files to .scss.

score:1

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


Related Query

More Query from same tag