Skip to main content

Import CSS or SCSS from package in SCSS

The plugin resolves default style files defined in node_modules automatically.

For example, import source styles of material-icons:

// import source styles from `material-icons` module
@use 'material-icons';

// define short class name for original `.material-icons-outlined` class name from module
.mat-icon {
  @extend .material-icons-outlined;
}

You can import a file from a module using the module name and the path to the file:

@use '<package>/path/to/style';
warning
  • The file extension, e.g. .scss, .css, must be omitted.
  • Use the @use instead of @import, because it is deprecated.

For example, import the style theme tomorrow from the prismjs module:

@use 'prismjs/themes/prism-tomorrow.min';
warning

Don't use resolve-url-loader!

The plugin resolves styles faster than resolve-url-loader and don't requires using the source map in sass-loader options.