css-loader: @import rules in css doesn't look in node_modules folder
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?
About this issue
- Original URL
- State: closed
- Created 10 years ago
- Comments: 18 (1 by maintainers)
Links to this issue
Commits related to this issue
- fixed hot handling it now bubbles when the css failed fixes #11 fixes #12 fixes #13 — committed to koistya/css-loader by sokra 10 years ago
css
@importis relative to the current directory. For resolving “like a module” you can prefix~.+1, is this documented anywhere?
Ah figured it out to get working in
resolve.alias. Closing thanks.@import "~normalize.css/normalize.css"worked for me, thanks for the tip.aaaaand simply
@import "~normalize.css"is what did it for meFor 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";you need to use @import “normalize.css”;
@JamesTheHacker
@sokra there’s no way to avoid the
~in the require? I was thinking about a fallback configuration or something similar.for js