Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names.
My designer has supplied me with a range of colors that will be used across various pages of the application. Leveraging SASS variables for these hex colors will prove to be beneficial.
In my project, I have made use of the following dependencies:
"node-sass": "4.12.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
The main SASS file of my app is named app.scss and it includes:
@import '~@nativescript/theme/css/core.css';
@import 'variables';
However, despite defining the SASS variables in my variables.scss file, they are not accessible in my component scss files. For example, in home.component.scss:
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
background-color: $navy_blue; //this does not exist
}
The contents of the variables.scss file include:
$navy_blue: #105195;
$vivid_cerulean: #28abe2;
$white: #ffffff;
$dark_navy_blue: #063260;
$light_grey: #eeeeee;
$error_red: #eb2026;
For experimenting purposes, a playground link is provided but it does not reflect my actual setup:
If you have any insights on how I can access these variables throughout my scss folders or files without repeatedly importing the variables file, please share your suggestions.