Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting Undefined variable error when compiling SCSS using node-sass

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\"."

like image 425
Ram Chandra Neupane Avatar asked Nov 27 '17 08:11

Ram Chandra Neupane


People also ask

How do I declare a variable in SASS?

Declaration of a variable in SASS: In SASS, you can define a variable by using $ symbol at the starting of the name of the variable and followed by its value. Understanding scope of a variable: SASS variables can be declared anywhere in the document before it is used.

Can we use JS variable in SCSS?

Sass variables and JavaScript. Sass is a pre-processing language, meaning it's turned into CSS before it ever is a part of a website. For that reason, accessing them from JavaScript in the same way as CSS custom properties — which are accessible in the DOM as computed styles — is not possible.

Can I use typescript variable in SCSS?

Sometimes you need to share variables between CSS (or SCSS) and Typescript, for example, if you have a list of colors in your SCSS file and need to check the variable names in typescript to be sure is an available color.


2 Answers

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

like image 56
Dileep XDN Avatar answered Sep 29 '22 18:09

Dileep XDN


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";
like image 20
David Tanzer Avatar answered Sep 29 '22 18:09

David Tanzer