SCSS / SASS - aliases for namespaces imported with @use

In this article, we would like to show you how to create aliases for namespaces imported with @use in SCSS / SASS.

Quick solution:

@use 'path/to/scss/file-name' as alias-name;

.element {
    color: alias-name.$variable-name;
}

Practical example

In this example, we import $font-size variable from assets/fonts.scss file into style.scss and using as keyword we give the fonts file an alias - commons. 

Project structure

/src/
 |
 +-- assets/
 |    |
 |    +-- fonts.scss
 |
 +------- style.scss

SCSS files

Example assets/fonts.scss file:

$font-size: 1.5rem;

Example style.scss file:

@use 'assets/fonts' as commons;

body {
	font-size: commons.$font-size;  /*  <--- Usage example   */
}

See also

1. SCSS / SASS - import variable