19

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?

1

2 Answers 2

40

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.

3
  • 4
    This solution is not working for me. Is there any issue with using @use within a file to @use another file?
    – terryoboy
    Commented Jun 23, 2021 at 18:05
  • 1
    check you are calling the correct relative path; @use "../abstracts/variables" as *; and add use to each file that requires external values like mixins or variables too Commented Jul 27, 2021 at 3:44
  • 1
    This worked for me, thank you! The documentation sucks for Dart.
    – Espskully
    Commented Aug 22, 2021 at 7:11
2

Don't forget that @use is file scoped, so you need to call it in each file you need it.

Also if you put * (@use 'variables' as *) you don't have to put a namespace.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.