SassError: @use rules must be written before any other rules. Angular

Question

The error content:

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

Answer 1

You must put any @use line of code above others.

For example the code below throws error:

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

@use "src/corners";

But this code will work fine:

@use "src/corners";

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

Remember that @use in the middle lines will throw error even if you don't use anything from the file.