Getting Undefined variable error when compiling SCSS using node-sass

Question

package.json

"scripts": {
  "compile:sass": "node-sass sass/main.scss css/style.css -w"
}

main.scss

@import "abstracts/variables";
@import "base/typography";  

_variables.scss

$color-light-grey: #777;
$color-white: #fff;   

_typography.scss

body {
  color: $color-light-grey;
}
.heading-primary {
  color: $color-white;
}

Now my issue is when I'm trying to compile with npm run compile:sass it throws the following error:

"message": "Undefined variable: \"$color-light-grey\"."

Bushel

variable vs. variables? – Diver

Answer 1

Looks like there are two errors in your code above:

• You import "abstracts/variables" but, at least in the text, the file name seems to be _variables.scss (missing an "s")
• You should import "abstracts/variables" before everything else.

Like that:

@import "abstracts/variables";
@import "base/typography";

Obscenity

It works, but how I don't know. Is there any reason why that would make a difference? Is there needed to order file by priority? – Bushel

Answer 2

convert all file names with beginning "_"
example:
typography.scss >> to >> _typography.scss

Gopherwood

Please ensure that your answer improves upon the answer already present in this question. – Diandrous

Answer 3

Simply import everything in this order

 - abstracts
 - vendors
 - base
 - layout
 - components
 - pages
 - themes

Attach