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

Question

我发现 create-react-app 文档建议使用 node-sass 但 npm 中的包说 LibSass 和 Node Sass 已弃用。因此，如果有人可以提供帮助，在 React 项目中安装 sass 的最佳方法是什么？

Answer 1

我一直在按照 create-react-app 的 documentation 的建议在我的 React 应用程序中使用 Sass/Scss，并且一切正常。您只需要：

第一步

npm install sass --save

第二步

将您的 .css 文件更改为 .scss。

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

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

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

javascript

sass

npm

reactjs

node-sass