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

by

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");

More Related Contents:

  1. Webpack “OTS parsing error” loading fonts
  2. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  3. How to add fonts to create-react-app based projects?
  4. Example of how to load static CSS files from node_modules using webpack?
  5. How to use images in css with Webpack
  6. Scope Bootstrap Css in Vue
  7. img src SVG changing the styles with CSS
  8. How do I make background-size work in IE?
  9. Why does applying a CSS-Filter on the parent break the child positioning?
  10. CSS Child vs Descendant selectors
  11. Nesting @media rules in CSS
  12. How can I center into a div?
  13. Why doesn’t this a:visited css style work?
  14. Text blended over background color
  15. Canvas has white space at the bottom and scrolls too far
  16. How to use ‘hover’ in CSS
  17. CSS rule based on content [duplicate]
  18. What does + mean in CSS? [duplicate]
  19. How can I apply multiple transform declarations to one element?
  20. Float right and position absolute doesn’t work together
  21. Converting and rendering web fonts to base64 – keep original look
  22. Why doesn’t inset box-shadow work over images?
  23. text-overflow ellipsis on flex child not working [duplicate]
  24. Make HTML5 video poster be same size as video itself
  25. Why does stacking order change on webkit filter hover?
  26. css text gradient
  27. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  28. Why put in front of the file name “_” or “_” in scss/css?
  29. Creating an Isoceles Trapezoid shape
  30. Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Leave a Comment