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

【问题标题】：What's the best way to add add sass/scss in a React app?在 React 应用程序中添加 add sass/scss 的最佳方法是什么？
【发布时间】：2022-04-06 06:08:06
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs npm sass node-sass

【解决方案1】：

我一直在我的React 应用程序中使用SASS/SCSS 作为create-react-app's documentation recommends，一切正常。您只需要：

第一步

npm install node-sass --save

第二步

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

【讨论】：

【解决方案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

【讨论】：