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

Question

我发现create-react-app文档建议使用node-sass，但npm上的软件包表明LibSass和Node Sass已经不推荐使用。所以如果有人能帮忙安装sass在React项目中，哪种方式最好呢？

- Mahmoud Abdulmuty

Answer 1

我一直在我的React应用程序中使用这个方法，就像Create React App的文档建议的那样，一切都运行良好。您只需要：

1. 首先打开您的项目终端，停止您的开发服务器并运行：

npm install sass

2. 将你的.css文件更改为.scss并更新你的导入：

import './index.scss';

3. 重新启动你的开发服务器即可：

npm start

- yousoumar

Answer 2

这对我来说似乎有效

安装sass：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

- atazmin