webpack css-loader does not load some paths

Question

I am trying to import a CSS file in my React project like so:

import 'react-select/dist/react-select.css';

and this fails with an error:

ERROR in ./node_modules/react-select/dist/react-select.css
Module parse failed: /Users/1111/_projects/getmybot/getmybot/node_modules/react-select/dist/react-select.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
|  * MIT License: https://github.com/JedWatson/react-select
| */
| .Select {
|   position: relative;
| }
 @ ./frontend/integration-layer-editor.js 13:0-45

However, when I copy the same file to my app folder everything suddently starts working:

import './react-select.css';

output:

                             Asset    Size  Chunks                    Chunk Names
integration-layer-editor.bundle.js  886 kB       0  [emitted]  [big]  integration-layer-editor
  [93] ./frontend/integration-layer-editor.js 740 bytes {0} [built]
 [200] ./frontend/react-select.css 920 bytes {0} [built]
 [201] ./node_modules/css-loader!./frontend/react-select.css 9.56 kB {0} [built]

Why is this happening?

Answer 1

It looks like your react-select/dist/react-select.css is loaded using a (second) loader different from css-loader. In your rules, do you have a rule being applied to broad on node_modules/ files?