Difference between @import and @use in Sass/scss

SASS provides @import and @use allows to reuse of mixins functions and variables in other modules.

@import and @use in Sass

@import allows you to import sass and CSS stylesheets into another stylesheet.

component.scss:

$primary-color: blue;

@mixin button {
  background-color: $primary-color;
  color: white;
}

Let’s import component.scss in style.scss

@import "component.scss";
.buttonId {
  @include button;
}

Let’s import component.scss in style.scss use @use

@use "component.scss" as component .buttonId {
  @include component.button;
}

Let’s see what is different between these two

@import:

@import allow you to import all features available globally.
If we have multiple component components containing variables, mixins, and functions, On importing this in another style makes it difficult to track where these mixins and variables are defined in it.
Since it is globally available, Name collision occurs from different components with the same name
During compilation, Generated CSS is copied to output CSS compilation time is and output contains more bloated CSS content. This is also caused due to importing the same multiple times in the hierarchy.
SASS framework going to deprecate the @import rule
There are no private styles applied to an only specific file

@use:

It is a replacement of @import
It provides namesakes and avoids name conflict issues.
@use allow you to import only one time, even if you use multiple places in styles.
@use imports by default with the filename as a namespace.
private styles are only applied to the current stylesheet with _(underscore) and -(hyphens)
@extend applies to the stylesheet that is imported.
Placeholder selectors do not apply namespace naming.