wonyun / umi-question-report

复现umi问题的一个仓库

问题复现步骤：

• umi通过设置cssLoaderOptions.modules为true来开启css modules
• 项目中引入第三方库中的css文件，如 src/pages/index.tsx中引入：

    import 'kindeditor/themes/default/default.css'

• 第三方库中的css样式中背景引入图片，该图片地址形式为：

  .xxx {
    background: url(background.png);
    ...
  }

然后执行npm start编译报错：

 ERROR  Failed to compile with 1 errors                       9:56:41 AM

 error  in ./node_modules/kindeditor/themes/default/default.css

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'background.png' in 
    '/Users/wonyun/Desktop/study/umi-question-report/node_modules/kindeditor/themes/default'
    at factory.create (/Users/wonyun/Desktop/study/umi-question-report/node_modules/webpack/lib/Compilation.js:925:10)
    at factory (/Users/wonyun/Desktop/study/umi-question-report/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
    at resolver (/Users/wonyun/Desktop/study/umi-question-report/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/wonyun/Desktop/study/umi-question-report/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/wonyun/Desktop/study/umi-question-report/node_modules/neo-async/async.js:2830:7
    at /Users/wonyun/Desktop/study/umi-question-report/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (/Users/wonyun/Desktop/study/umi-question-report/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/wonyun/Desktop/study/umi-question-report/node_modules/enhanced-resolve/lib/Resolver.js:213:14)
    at hook.callAsync (/Users/wonyun/Desktop/study/umi-question-report/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/Users/wonyun/Desktop/study/umi-question-report/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

 @ ./src/pages/index.tsx 3:0-47
 @ ./src/pages/.umi/router.js
 @ ./src/pages/.umi/umi.js
 @ multi ./node_modules/af-webpack/lib/webpackHotDevClient.js ./src/pages/.umi/umi.js

原因：

umi的css modules的配置导致css-loader在处理node_modules中库的css文件时，不会对其url进行处理；例如上面的background的图片path没有转化为./background.png。

这是因为css modules的配置影响到node_modules第三方库中的css modules，导致postcss未对css中的url进行处理。