E.g. @import url("~./foobar");
Saw it here, not sure if it's some package specific thing or if it's actual CSS syntax.
-
4@JackMiller No, this is not a selection operator, it’s part of a file directory.Sebastian Simon– Sebastian Simon2016-09-16 16:09:35 +00:00Commented Sep 16, 2016 at 16:09
Add a comment
|
3 Answers
The CSS @import path <url> is usually relative to the current working directory.
So using the prefix ~ at the start of the path tells Webpack's css-loader to resolve the import "like a module", starting from the node_modules directory.
What that means is that if you have a node module called normalize installed, and you need to import a css file from within it named /normalize.css, you can do that with:
@import "~normalize/normalize.css";
In your linked example, inside font-loader/example/test.js there is an import of a module called font-boon.
var boon = require('./font-boon');
Inside of font-loader/example/test.css the font-boon module is @imported so that it is available in text.css.
@import url("~./font-boon");
2 Comments
YANZ
so.. basically, is
~ contain node_module path?
Nickolay
UPDATE March 2021
From sass-loader tilde '~' imports are deprecated and is recommended to be removed.
1 Comment
Andrew
Note that the
~ imports are deprecated in sass-loader, but not in css-loader. webpack.js.org/loaders/css-loader/#urlUsing an @import statement assumes you're importing from the node_modules folder. So for example if you're trying to import bootstrap.css, you'd use
@import "~bootstrap/dist/css/bootstrap.css"
That is, you're putting the path relative to the node_modules folder.
