url and file loaders failed to resolve when an external css is imported.

Created by: 0x006F

Description

Redirected from here
When I tried to import a css file that resides in an another local package, I got some module not found error for url and file.

Expected behavior

The url-loader and file-loader should resolve automatically without any errors.

Actual behavior

What I got:

Failed to compile.

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:118615-118666

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154380-154430 6:154453-154503

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154553-154605

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154636-154687

Error in ../semantic/dist/semantic.css
Module not found: 'url' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154717-154767

Error in ../semantic/dist/semantic.css
Module not found: 'file' in D:\work\open-source\cra-test\packages\semantic\dist

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!../semantic/dist/semantic.css 6:154801-154851

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): react-scripts@0.9.1
2. node -v: v6.9.1
3. npm -v: 4.2.0

Then, specify:

1. Operating system: Windows 10 Professional
2. Browser and version: Google Chrome Version 58.0.3024.0 (Official Build) canary (64-bit)

Reproducible Demo

I've created a sample repo to reproduce this issue here. I've used LernaJS for managing local module. To repoduce:

• Clone the repo
• Run lerna bootstrap from the root directory. Install lerna globally if you haven't npm i -g lerna@2.0.0-beta.37
• Navigate to cra-test\packages\semantic and run npm run build to build the CSS
• Navigate to cra-test\packages\my-app and run npm start