18

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?

terryoboy
  • 136
  • 2
  • 12
undefined
  • 978
  • 1
  • 12
  • 30

2 Answers2

36

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.

4ndroid4va
  • 441
  • 5
  • 8
  • 4
    This solution is not working for me. Is there any issue with using `@use` within a file to `@use` another file? – terryoboy Jun 23 '21 at 18:05
  • 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 – Rishi Bhachu Jul 27 '21 at 03:44
  • 1
    This worked for me, thank you! The documentation sucks for Dart. – Espskully Aug 22 '21 at 07:11
0

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.

xelaxam
  • 1
  • 1