如何为ejected后的create-react-app配置添加styled-jsx？

嘿，我之前也折腾过这个配置，给你一步步说清楚怎么弄：

1. 先安装styled-jsx依赖
   首先确保你已经安装了核心包，在项目根目录跑命令：

   npm install styled-jsx --save
   # 或者用yarn
   yarn add styled-jsx
   

2. 找到webpack.dev.config.js里的babel-loader配置
   打开webpack.config.dev.js，搜索/\.(js|mjs|jsx|ts|tsx)$/这个规则——这是webpack用来处理JS/JSX文件的核心规则。你要找的是这个规则里的babel-loader配置部分，它在use数组里面。

3. 添加styled-jsx的Babel插件
   在babel-loader的options里，找到plugins数组（如果没有的话就自己新建一个），把styled-jsx/babel插件加进去。举个配置示例：

   {
     test: /\.(js|mjs|jsx|ts|tsx)$/,
     include: paths.appSrc,
     loader: require.resolve('babel-loader'),
     options: {
       customize: require.resolve(
         'babel-preset-react-app/webpack-overrides'
       ),
       presets: [
         [
           require.resolve('babel-preset-react-app'),
           {
             runtime: hasJsxRuntime ? 'automatic' : 'classic',
           },
         ],
       ],
       // 这里就是要加的插件
       plugins: [
         require.resolve('styled-jsx/babel'),
         // 保留原来已有的其他插件
       ],
       cacheDirectory: true,
       cacheCompression: false,
       compact: isEnvProduction,
     },
   }
   

4. 重启开发服务器
   配置修改完后，记得关掉当前的npm start进程，重新启动开发服务器，这样新的webpack配置才会生效。

另外提醒一句：如果你之后要打包生产环境，记得在webpack.config.prod.js里做完全一样的配置，不然生产环境的styled-jsx样式会失效哦～

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