CODEWITHSUNDEEP
csssass
hjobrien
hjobrien

Reputation: 141

Error when attempting to @use sass variables with node-sass

I'd like to put a shared constant in a single .sass file and then import this in other .sass files but I'm getting Invalid CSS errors. currently, my code is structured as:

// src/react/stylesheets/_constants.sass

$uiAccent: black

and

// src/react/stylesheets/myComponent.sass

@use "constants"

//...

.item
    border-bottom: 1px solid
    border-color: constants.$uiAccent

I modeled this based on the official sass guide for @use and as best I can tell, my structure is identical to theirs.

When I run sass --watch src/react/stylesheets/:src/react/css/ to convert my sass files to css ones, I get error src/react/stylesheets/myComponent.sass (Line 12: Invalid CSS after "constants": expected expression (e.g. 1px, bold), was ".$uiAccent")

I've tried moving the variable into the file where it was used (so I just removed the @use line and copied in the variable assignment), and it all works fine, so I don't think it's an issue with the sass to css conversion, and I've made sure all my files are .sass and not .scss because I've seen someone have a similar problem with .scss files.

I found this github issue which looks similar, especially the related one about node-sass but these were both from 2015 so I have a hard time believing that such a common feature has been broken for 5 years.

Upvotes: 1

Views: 620

Answers (1)

hjobrien
hjobrien

Reputation: 141

Update: I realized that I misunderstood the page on @use and that it's only supported by Dart Sass right now, not LibSass, so @import is not discouraged in this case.

Upvotes: 1

Related Questions