如何在create-react-app中搭配styled-components v6使用babel-plugin-styled-components

由于styled-components v6移除了macro功能，而Create React App默认不允许直接修改Babel配置，你可以通过以下两种常用方案实现生产环境类名压缩：

方案一：使用Craco（Create React App Configuration Override） #

1. 安装依赖

   npm install @craco/craco babel-plugin-styled-components --save-dev
   # 或使用yarn
   yarn add @craco/craco babel-plugin-styled-components --dev
   

2. 在项目根目录创建craco.config.js文件，添加配置：

   module.exports = {
     babel: {
       plugins: [
         [
           "babel-plugin-styled-components",
           {
             minify: true,
             transpileTemplateLiterals: true,
             pure: true
           }
         ]
       ]
     }
   };
   

3. 修改package.json中的脚本命令，替换默认的react-scripts：

   {
     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
   }
   

4. 执行npm run build，生产环境下styled-components的类名会自动压缩。

方案二：使用react-app-rewired + customize-cra #

1. 安装依赖

   npm install react-app-rewired customize-cra babel-plugin-styled-components --save-dev
   # 或使用yarn
   yarn add react-app-rewired customize-cra babel-plugin-styled-components --dev
   

2. 在项目根目录创建config-overrides.js文件，添加配置：

   const { override, addBabelPlugin } = require("customize-cra");
   
   module.exports = override(
     addBabelPlugin([
       "babel-plugin-styled-components",
       {
         minify: true,
         transpileTemplateLiterals: true,
         pure: true
       }
     ])
   );
   

3. 修改package.json中的脚本命令：

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

4. 执行npm run build即可生效。

额外说明 #

• 配置中的minify: true是开启类名压缩的核心选项，pure: true可辅助Tree Shaking，移除未使用的样式代码。
• 若想在开发环境保留可读性类名，可通过环境变量动态配置：

  const isProduction = process.env.NODE_ENV === "production";
  
  // 在插件配置中设置 minify: isProduction
  

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