如何配置Create React App以集成开源CSS Blocks并保留原有功能？

我来帮你一步步实现在CRA项目里集成CSS Blocks，同时保留原有CRA的所有功能。核心思路是通过react-app-rewired来修改CRA的默认Webpack配置，给babel-loader添加上CSS Blocks的插件，不用完全 eject 项目。

步骤1：安装必要依赖 #

首先你需要安装CSS Blocks的babel插件，以及用来修改CRA配置的工具：

npm install --save-dev @css-blocks/babel-plugin react-app-rewired customize-cra

步骤2：修改package.json的脚本命令 #

把原来的start、build、test命令替换成react-app-rewired的版本，这样就能加载我们的自定义配置了：

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

步骤3：创建自定义配置文件 #

在项目根目录下新建config-overrides.js文件，用来修改CRA的Webpack配置，重点是给babel-loader添加CSS Blocks插件：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    '@css-blocks/babel-plugin',
    {
      // 这里配置CSS Blocks的选项，比如指定blocks的目录
      blocks: {
        '@css-blocks/my-blocks': './src/blocks'
      },
      // 其他可选配置，比如生成的CSS输出路径等
      outputCssFile: './src/generated/blocks.css'
    }
  ])
);

注意：根据你的项目结构调整blocks和outputCssFile的配置，确保路径正确。

步骤4：在React组件中使用CSS Blocks #

现在你可以创建一个CSS Block文件（比如src/blocks/button.block.css）：

@block button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;

  &:hover {
    background-color: darkblue;
  }
}

然后在React组件中引用这个block：

import React from 'react';
import { button } from '@css-blocks/my-blocks/button.block.css';

function App() {
  return (
    <div className={button()}>
      Click Me
    </div>
  );
}

export default App;

步骤5：验证集成效果 #

运行npm start启动项目，检查组件是否正确应用了CSS Block的样式，同时确认CRA的原有功能（比如热重载、build打包等）都正常工作。

如果遇到样式不生效的问题，可以检查：

• config-overrides.js里的路径配置是否正确
• 是否在组件中正确导入了CSS Block
• 生成的blocks.css是否被正确引入到项目中（可以在index.js里手动导入）

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