Using External Assets

Stylable supports usage of url functions to use assets as you normally would in CSS.

The value passed to the url() function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions.

The url() function has no notion of external packages or dependencies.

Resolving 3rd-party assets

In order to import url() assets from dependencies inside your node_modules directory, Stylable supports the ~ URL prefix.

.root {
  /* resolves as the node request: "my-package/asset.png" */
  background: url(~my-package/asset.png);

.root {
  /* resolves as the node request: "./my-package/asset.png" */
  background: url(my-package/asset.png);