Sass @use ordering-CodePudding

I have some styles:

tokens.scss

.text-center {
  text-align:center;
}

.bold {
  font-weight: bold;
}

@mixin text-style-1 {
  font-size: 1.2rem;
  font-weight: bold;
}

component/card.scss

@use "../token.scss" as tokens;

.card {
  @include tokens.text-style-1;
  border: 1px solid #333333;
}

index.scss

// import components
@use component/card.scss

// import tokens
@use tokens.scss

When I compile index.scss I would like the styles from tokens.scss to be included after my component styles, but because I @use the mixins from tokens.scss in my components it's always imported before and not in the order defined in index.scss.

Is there anyway to just include the mixins from tokens.scss without importing all the styles before my components? Or is there anyway to define an import ordering when using @use?

The only way I've found to fix this issue is by replacing @use with @import in index.scss, but this obviously duplicates the styling which isn't ideal.

CodePudding user response：

What you should do is take the mixin in a separate file. Unfortunatly, @import and @use will bring the styling with them.

From the SASS documentation

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

And then

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px   c.$radius;
}

EDIT : added the ouput

.button {
  border-radius: 3px;
  padding: 8px;
}