Sass: @use makes error, undefined variable

Question

I'm using Sass and want to use @use keyword instead of @import. Because, @import has many buggy problems. Also only dart-sass supports this feature, I changed node-sass into dart-sass. However, problem is occurred.

My original code

@import '@carbon/colors/scss/colors'

dart-sass and @use applied code

@use '@carbon/colors/scss/colors'

Error: Undefined variable.

How can I solve it?

Answer 1

The problem might be that @use adds a namespace to your variables – in order to continue using variables like you did before (as color: $variable instead of color: namespace.$variable) you need to import it like so:

@use '@carbon/colors/scss/colors' as *;

according to the official docs.