SASS doesn't compile when one partial uses variable declared in another partial

Question

I have very small hello world SCSS project as follows:

index.html

<h1 class="heading-primary">Hello world!</h1>

sass\main.scss

@import "base/typography";    //Line A
@import "abstract/variable";

sass/abstract/_variable.scss

$color-white: #fff;
$color-black: #000;
$color-red: red;

sass/base/_typography.scss

.heading-primary {
  color: $color-red;
}

package.json

{
  "name": "starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile":"node-sass ./sass/main.scss css/style1.css -w"
  },
  "author": "sandeep",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.7.2"
  }
}

Now if I run npm run compile, SASS does not compile and just shows this message

> [email protected] compile C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test
> node-sass ./sass/main.scss css/style1.css -w

However, if I comment Line A in main.scss, SASS works perfectly file

=> changed: C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\sass\main.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\sandgup3\Desktop\NodeBook\advanced-css-course\Natours\test\css\style1.css

Now if I uncomment Line A from main.scss I get this error:

{
  "status": 1,
  "file": "C:/Users/sandgup3/Desktop/NodeBook/advanced-css-course/Natours/test/sass/base/_typography.scss",
  "line": 3,
  "column": 10,
  "message": "Undefined variable: \"$color-red\".",
  "formatted": "Error: Undefined variable: \"$color-red\".\n        on line 3 of sass/base/_typography.scss\n>>   color: $color-red;\n   ---------^\n"
}

Also, if I directly import _variables.scss into _typography.scss, SASS compiles fine.

Can someone help debug this? I have uploaded the file to GitHub for reference:Link

markus markus · Accepted Answer · 2018-01-28T10:04:03

It's very simple. You're importing the partials in the wrong order. Import the variables first (always), then the rest of the partials that make use of the variables.

sass\main.scss

@import "abstract/variable";
@import "base/typography";

PS: The file should be called variables (plural).

SASS doesn't compile when one partial uses variable declared in another partial

1 Answers