@import rules in css doesn't look in node_modules folder

[ryanseddon]

I have a file called base.css that has an import statement

@import "normalize.css/normalize.css"
body {
  background: red;
}

This is my app.js:

var css  = require('./styles/base.css');

module.exports = function Foo() {
    return {
        foo: 'bar',
        baz: 'gah'
    };
};

I've npm installed normalize but running the webpack command throws:

$ webpack
Hash: 2a64a4ac64b2026975fb
Version: webpack 1.1.8
Time: 82ms
    Asset  Size  Chunks             Chunk Names
bundle.js  2019       0  [emitted]  main
   [0] ./src/app.js 137 {0} [built]
   [1] ./src/styles/base.css 177 {0} [built] [1 error]

ERROR in ./src/styles/base.css
Module not found: Error: Cannot resolve file or directory ./normalize.css/normalize.css in /Users/Ryan/Git/webpack-demo/src/styles
 @ ./src/styles/base.css 2:1-116

What am I doing wrong? I understand that it's looking in styles dir but I thought it would scan node_modules first?

[sokra]

css @import is relative to the current directory. For resolving "like a module" you can prefix ~.

@import "~normalize.css/normalize.css"
body {
  background: red;
}

[ryanseddon]

Ah is that documented anywhere?

If I have resolve.alias for my modules will this require a tilde too?

[ryanseddon]

Ah figured it out to get working in resolve.alias. Closing thanks.

[gsklee]

+1, is this documented anywhere?

[nickdima]

@ryanseddon could you please explain how you set up the alias? thanks!

[nickdima]

@sokra there's no way to avoid the ~ in the require? I was thinking about a fallback configuration or something similar.

[alexrogers]

@import "~normalize.css/normalize.css" worked for me, thanks for the tip.

[johnnyoshika]

For anyone else having trouble importing css like I did, make sure you don't forget the semi-colon at the end:

@import "~normalize.css/normalize.css";

[ericdfields]

aaaaand simply @import "~normalize.css" is what did it for me