What does a `~` tilde in a CSS `url()` do?

我是研究僧i 提交于 2019-11-26 18:01:38

问题


E.g. @import url("~./foobar");

Saw it here, not sure if it's some package specific thing or if it's actual CSS syntax.


回答1:


The CSS @import path <url> is usually relative to the current working directory.

So using the prefix ~ at the start of the path tells the Webpack loader to resolve the import "like a module" from a node module path.

What that means is that if you have a node module called normalize installed, and you need to import a 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");



来源:https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!