2

I have a variable and gallery partial: _variables.scss, _gallery.scss

When I import the variables file, which contains only one line $primary: #e0291a;, it works in the main style.scss file, but not in the _gallery.scss file.

My project is only going to grow, but do I really need to import the variables file in every single subsequent partial file?

I'm using VSCode Live Sass Compiler. The variables work with a custom webpack/laravel mix script I've set up a few years back, but not with this extension.

Is there a way to streamline the variable import without adding the line in every single scss file?

style.scss (main file):

@use 'variables';
@use 'gallery';

_variables.scss:

$primary: #ffffff;

_gallery.scss:

#gallery {
    background-color: $primary // <--- Throws error of undefined variable
}
HenrijsS
  • 656
  • 4
  • 25
  • have you considered using CSS variables instead? – Felipe Chernicharo Aug 30 '21 at 18:35
  • 1
    You just need to add `@use "path-to/variables" as *;` (if you want to access variables without a namespace like your doing above) to the top of `_gallery.scss` because it doesn't have access to the loaded members in `_variables`. So in short, yes you need to give that `_gallery.scss` partial knowledge of loaded members from `_variables.scss`. – Tanner Dolby Aug 30 '21 at 18:48
  • Does this answer your question? [SASS - use variables across multiple files](https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files) – Art Aug 30 '21 at 19:30
  • 1
    @ArtiomB [`@import`](https://sass-lang.com/documentation/at-rules/import) at-rules are gradually being phased out in dart-sass so its probably best to move forward with a `@use` solution. – Tanner Dolby Aug 30 '21 at 19:50

0 Answers0