I'm building an app with NativeScript 6.4.1 and Angular 8. I want to use SASS with it because I like the features that come with SASS such as variable names.
My graphic designer has provided a number of colors that I will use app-wide on different pages so the SASS variables for the hex colors is going to be good.
I have installed
"node-sass": "4.12.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
app.scss
@import '~@nativescript/theme/css/core.css';
@import 'variables';
The problem that I have is my SASS variables don't seem to be available in my component scss files.
home.component.scss
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
background-color: $navy_blue; //this does not exist
}
variables.scss
$navy_blue: #105195;
$vivid_cerulean: #28abe2;
$white: #ffffff;
$dark_navy_blue: #063260;
$light_grey: #eeeeee;
$error_red: #eb2026;
Here is a playground to play with but it's not my real set-up: https://play.nativescript.org/?template=play-ng&id=aDZ7lZ
How can I use the variables in any scss folder or file?
I would prefer not to import the variables file all over the place.
There is no alternative solution, you must include variable scss file in all component specific scss file, without that the compiler wouldn't know what you are looking for.
If you need this badly, I would suggest you to go through webpack docs, you might find a workaround for injecting your variables by default.