Quick Tip: Import CSS from Node Modules Using Webpack and CSS-Loader

Here’s a quick tip for importing CSS directly from your node_modules folder when using webpack and the CSS Loader. This is superior to just copy-and-pasting the CSS code because it ensures that your styles will always be in sync with your version of the library, you don’t have to remember to update the styles manually, and it’s a lot less work!

Use ~

@import "~some-package/some-stylesheet";

div {
  background-image: url("~some-package/some-image.png");
}

For more info, check out the CSS Loader Options docs.

Don’t forget :global if using CSS Modules

If you are using CSS Modules, make sure to use the :global selector so that the classnames are not inadvertently hashed.

:global {
  @import "~some-package/some-stylesheet";
}

For more info, check out the CSS Modules Exceptions docs.