未eject的rewired版CRA导入node_modules命名空间CSS配置问题

配置错误原因 #

1. react-app-rewire-multiple-entry的使用语法错误：该库的多入口配置要求每个入口单独作为数组的一个对象项，你在同一个入口对象内添加的helpers_1、helpers_2属于无效自定义属性，不会被识别为额外入口。
2. 即使配置正确多入口，直接将CSS文件作为独立入口不符合CRA的默认打包逻辑：CRA的webpack配置只会处理JS/TS类入口的依赖资源，独立CSS入口的样式不会自动注入到主应用的产物中，需要手动额外引入，完全没必要用多入口方案实现这个需求。

修复方案 #

方案一：入口代码直接引入（优先推荐，最稳定）

不需要修改任何配置，直接在项目入口文件src/index.tsx的最顶部添加引入语句即可：

import '@namespace/helpers/dist/index.css'
// 原有入口代码保持不变

该方式符合CRA的默认使用逻辑，CSS会自动和项目其他样式合并打包，自动注入到页面中。

方案二：配置方式注入（适用于不能修改入口代码的场景）

不需要安装额外依赖，直接使用customize-cra自带的addWebpackEntry方法将CSS加入主入口的依赖链即可，修改config-overrides.js如下：

const path = require('path')
const fs = require('fs')
const {
  override,
  overrideDevServer,
  watchAll,
  removeModuleScopePlugin,
  addWebpackModuleRule,
  addWebpackEntry // 新增引入该方法
} = require('customize-cra')

const theme = process.env.REACT_APP_THEME
const currentDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(currentDirectory, relativePath)

// 删掉原来所有react-app-rewire-multiple-entry相关的代码

module.exports = {
  webpack: override(
    // 新增这行，将依赖CSS加入主入口的前置依赖
    addWebpackEntry('main', resolveApp('node_modules/@namespace/helpers/dist/index.css')),
    removeModuleScopePlugin(),
    addWebpackModuleRule({
      test: /\.svg$/,
      loader: 'raw-loader',
      include: [
        resolveApp('../source/' + theme + '/icons/dist')
      ]
    })
  ),
  devServer: overrideDevServer(
    watchAll()
  ),
  paths: paths => {
    paths.appBuild = path.join(paths.appBuild, theme)
    return paths
  }
}

可选排查点 #

如果配置后依然不生效，可按以下顺序排查：

• 确认node_modules/@namespace/helpers/dist/index.css文件实际存在
• 如果该依赖是通过npm link/yarn link软链到本地的开发包，你已经开启的removeModuleScopePlugin已经解决了CRA的目录访问限制，无需额外配置
• 清理项目缓存后重新启动：执行rm -rf node_modules/.cache后重新运行启动命令

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