1

Some Angular demos import CSS using the ~ character like this:

 import `~@angular/material/prebuilt-themes`?

IIUC webpack supports supports ~ as a means to resolve CSS packages from the node_modules directory. Can the ~ character be used in place of node_modules in general when importing css with Angular? In other words is this a part of Angular usage contract for how CSS should be imported or are we just getting this feature as a "side effect" enabled by webpack?

If not does Angular have another approach that it recommends when importing NPM CSS packages?

Ole
  • 41,793
  • 59
  • 191
  • 359

1 Answers1

2

I believe this is the Webpack loader feature, documented here ex. https://github.com/webpack-contrib/css-loader#usage and https://github.com/webpack/webpack/issues/1789

In general, to import CSS, it does recognize relative path, ex. @import "../abc.css". But the best way is using ~, as long as your css is stored inside node_modules.

windmaomao
  • 7,120
  • 2
  • 32
  • 36