@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

[langri-sha]

If you want what @ericdfields is doing, you need to override the defaults for resolve.packageMains and make sure to include style.

[JamesTheHacker]

Non of the above works for me. I get the following error:

ERROR in ./~/css-loader!./~/postcss-loader!./src/css/base.css
    Module build failed: Error: ENOENT: no such file or directory, open '/Users/jamesjeffery/Projects/StudentApp/src/css/~normalize.css'
        at Error (native)

I tried both @import "~normalize.css/normalize.css"; and @import "~normalize.css";`. I have normalize.css installed via npm.

[langri-sha]

@JamesTheHacker do you have postcss-import configured and are you on Webpack 1?

[quantuminformation]

I also had the same issue with postcss-smart-loader. Using webpack 2 beta 27

[quantuminformation]

you need to use @import "normalize.css";

@JamesTheHacker

[thefron]

@quantuminformation Removing tilde worked for me. Thanks!

[rhysburnie]

Hi,

Is there anyway around this issue?

If I have a css file with @import '~normalize.css'; without css modules it's fine.
Then If I enable css modules I get an error unless I use `@import 'normalize.css';

So if you use the the same css file for two projects one with without modules one with you have to add / remove tilde ~ respectively.

I've read in other places you "may" remove tilde when using css modules, but it seems like you have to

[ghost]

@quantuminformation Removing tilde worked for me. Thanks!

@rhysburnie

I have a css file with @import 'normalize.css'; without css modules it's fine.
But If I enable css modules I get an error with @import '~normalize.css'; unless I remove tilde;

[yyman001]

for js

let reset_css = require('normalize-css/normalize.css')