web-dev-qa-db-ja.com

CSS `url()`の `〜`チルダは何をしますか?

例えば。 @import url("~./foobar");

見た here 、パッケージ固有のものなのか、実際のCSS構文なのかはわからない。

62
ahstro

CSS @import path <url>は、通常、現在の作業ディレクトリに相対的です。

したがって、パスの先頭で接頭辞~を使用すると、Webpackローダーはノードモジュールパスからの「モジュールのような」インポートを解決するように指示されます。

つまり、normalizeというノードモジュールがインストールされていて、その中から/normalize.cssという名前のファイルをインポートする必要がある場合は、次のようにできます。

@import "~normalize/normalize.css";

リンクされた例では、font-loader/example/test.jsの中にfont-boonというモジュールのインポートがあります。

var boon = require('./font-boon');

font-loader/example/test.cssの内部で、font-boonモジュールは@importされ、text.cssで利用可能になります。

@import url("~./font-boon");

88
ksav