如何在React-Redux项目中结合Material Design使用CSS预处理器？

嘿，我来帮你理清这个问题——其实现在的实现方式比你看到的旧文档要简单太多了，不用纠结那些复杂的配置，我给你一步步拆解：

先解答你的核心疑问 #

• 是否必须使用node-sass？
  完全不用！node-sass已经停止维护快3年了，现在官方推荐用dart-sass（也就是npm上的sass包），它兼容性更好，不需要依赖特定Node版本，而且Material Design相关的组件库（比如MUI）都完美支持它。

• 是否需要执行npm run eject？
  绝对不需要！eject会把CRA的默认配置全部暴露出来，后续升级维护会非常麻烦。现在可以用craco或者react-app-rewired来扩展配置，完全不用动CRA的核心文件。

• 是否需要安装webpack@3.x.x？
  没必要！CRA自带的Webpack版本已经足够新，而且craco会自动适配当前项目的Webpack版本，手动指定旧版本反而会引发兼容性问题。

具体操作步骤（以主流的MUI为例） #

1. 准备项目（如果已有React-Redux项目可跳过） #

如果还没创建项目，用CRA的Redux模板快速生成：

npx create-react-app my-redux-app --template redux
cd my-redux-app

2. 安装必要依赖 #

这里我们用MUI（Material-UI的新版）作为Material Design组件库，搭配sass和craco：

npm install @mui/material @emotion/react @emotion/styled sass @craco/craco

• @mui/material：MUI的核心组件库
• @emotion/*：MUI默认的样式解决方案，和sass可以完美配合
• sass：CSS预处理器（替代node-sass）
• @craco/craco：用来扩展CRA配置的工具

3. 修改package.json的脚本 #

把原来的start/build/test改成用craco执行，这样才能加载我们的自定义配置：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

4. （可选）配置全局Sass变量 #

如果你的项目需要全局共享Sass变量（比如主题色、字号），可以在项目根目录创建craco.config.js：

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        // 自动在所有Sass文件中导入全局变量文件
        additionalData: `@import "./src/styles/globals.scss";`,
      },
    },
  },
};

然后创建src/styles/globals.scss：

$primary-color: #1976d2;
$secondary-color: #dc004e;

之后所有组件的Sass文件都能直接用这些变量。

5. 在组件中使用Sass + MUI #

举个简单的例子，创建一个带自定义Sass样式的MUI按钮组件：
src/components/CustomButton.jsx：

import React from 'react';
import Button from '@mui/material/Button';
import './CustomButton.scss';

const CustomButton = () => {
  return (
    <Button className="custom-primary-btn" variant="contained">
      自定义样式按钮
    </Button>
  );
};

export default CustomButton;

对应的src/components/CustomButton.scss：

.custom-primary-btn {
  background-color: $primary-color !important;
  padding: 12px 24px;
  border-radius: 8px;

  &:hover {
    background-color: darken($primary-color, 10%) !important;
  }
}

额外说明 #

如果你用的是旧版的@material-ui/core（而非新版MUI），操作逻辑基本一致，只是依赖换成@material-ui/core，样式部分可以配合makeStyles使用，同样能无缝接入Sass。

内容的提问来源于stack exchange，提问作者Daniel