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\"."
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.
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.
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.
convert all file names with beginning "_"
example:
typography.scss >> to >> _typography.scss
Looks like there are two errors in your code above:
"abstracts/variables"
but, at least in the text, the file name seems to be _variables.scss
(missing an "s")"abstracts/variables"
before everything else.Like that:
@import "abstracts/variables";
@import "base/typography";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With