CSS`url ()`의`~`물결표는 무엇을합니까?

예 @import url("~./foobar");

여기 에서 보았습니다. 패키지에 특정한 것인지 또는 실제 CSS 구문인지 확실하지 않습니다.

CSS의@import 경로는 <url>일반적으로 현재 작업 디렉토리에 상대적입니다.

따라서 ~경로 시작 부분에 접두사 를 사용하면 Webpack 로더가 node_modules디렉토리 에서 시작하여 "모듈처럼"가져 오기를 해결하도록 지시합니다 .

즉 normalize, 라는 노드 모듈이 설치되어 있고 그 안에서라는 파일을 가져와야하는 경우 /normalize.css다음을 사용하여 수행 할 수 있습니다.

@import "~normalize/normalize.css";

연결된 예제에서 내부 font-loader/example/test.js에는라는 모듈 가져 오기가 font-boon있습니다.

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

font-loader/example/test.cssfont-boon 모듈 내부에는 @imported가 있으므로 text.css.

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