在 React 應用程序中添加 add sass/scss 的最佳方法是什么？

Question

我發現 create-react-app 文檔建議使用 node-sass，但 npm 中的 package 說 LibSass 和 Node Sass 已棄用。 那么，如果有人可以幫助在 React 項目中安裝 sass 的最佳方法是什么？

Answer 1

按照create-react-app文檔的建議，我一直在我的React應用程序中使用sass ，一切正常。 如果只是npm的這些警告之一，我認為沒關系。 根項目文件夾的終端中的這一行，您對 go 很好。

 npm install node-sass --save

Answer 2

這似乎對我有用

npm 安裝 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