Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

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.

cssangularsassnativescript

Answer №1

It is vital to include the variable SCSS file in all component-specific SCSS files as there is no alternative solution. Without this, the compiler will not be able to identify what you are seeking.

If you are in urgent need of this functionality, I recommend delving into the Webpack documentation. You may discover a workaround for automatically injecting your variables.

Answer №2

To include the variables from variable.scss in your component.scss file, simply import it.

Alternatively, you can define your variables like this:

:root {
    --variable1: #fff;
    --variable2: #ddd;
}

Then use them in your styles like so:

color: var(--variable1)

within your component.scss file.

LATEST UPDATE

I believe I have resolved your issue. Please take a look at this link for more details.

The problem stemmed from using a css file instead of scss for the home component in the example. This has been rectified in the provided playground 😊

LATEST UPDATE Simply add the following code:

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.scss"],
    encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
...
}

This will apply all global styles without requiring the importing of .scss files.

I'm happy to assist you 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Apply CSS code to create a fading effect for a container

Below is the code for my accordion list, created using only CSS and HTML. Whenever a heading is clicked, the text slides in with a different background color. How can I make it so that the container with the text and different background color fades in and ...

htmlcss

Create an HTML component that expands to fill any leftover space on the page, without using flex

In my current situation, I have two elements positioned side by side with dynamic widths based on their content. The element on the right needs to fill up as much vertical space as possible without a set width. I am looking for an alternative to flexbox d ...

htmlcss

What is the best way to position two divs side by side while maintaining their individual padding?

When I remove the padding as shown, the website functions correctly with two div columns next to each other. However, upon adding padding, the #right div shifts downwards. How can I ensure it works as intended with padding included? HTML: Two divs direct ...

htmlcssalignmentcss-float

Struggling to align an element in HTML when used in columns?

<div class="row"> <div class="col-lg-3 " style="border: groove;"> <p class="circle col-xs-1 center-block">01</p> <h3>trending courses</h3> ...

htmlcssbootstrap-5

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

angulartypescriptimportocrtesseract

What are some strategies for managing multiple versions of NPM and Node? Is there a way to install Angular for a single project without affecting other projects?

I have been tasked with working on two separate projects that rely on NPM and Node. The first project was developed using Ionic, while the new one requires Angular exclusively. Initially, only the Ionic project was set up on my laptop, so all installations ...

node.jsangularionic-frameworknpm

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

Using Angular: Fetch HTTP Data Once and Return as Observable in Service

My Goal: I need to retrieve data via HTTP only once and then share it across my entire application as properties. However, since HTTP requests can be slow, my app should continuously monitor these properties. The challenge is to ensure that the HTTP call i ...

angular

"Import data from a text file and store it as an array of objects using Types

I need assistance with converting the information in my text file into an array of objects. Below is a snippet of the data from the text file: DOCNO NETAMOUNT IREF1 IREF2 DOCDT 001 30000 50 100 6/7/2020 2 40000 40 90 6/7/2020 Currently, t ...

javascriptarraysangulartypescript

Issue: When a function within a subscribe method does not return a value and its declared type is not 'void' or 'any', a TypeScript error occurs

In my Angular 2 project, I've created a basic service to check if the user is logged in. This service verifies the existence of the user object within the FirebaseAuth object. However, I encountered an error stating "lack of return statement" even tho ...

angulartypescriptfirebase

The drop-down tabs are being covered by my <div> element

I've been struggling with the layout of my website due to issues with the positioning of my div tags. Whenever I hover over the arcade tab or other drop-down menus, they end up behind the div for my movies. I would like to reverse this behavior so tha ...

htmlcss

When the application initializes, the Child Component is activated

There's a scenario where I need to trigger a component named 'cancellation' when the user clicks a button in another component called 'names'. To achieve this, I set a flag called loadCancellation to true when the Search button is ...

angularangular-materialangular6

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure : <div class="gallery"> <div class="message"> Welcome to the gallery </div> <img src="http://placehold.it/300x300" /> </div> Here ...

cssimageopacityabsolute

Oops! The type error is indicating that you tried to pass 'undefined' where a stream was required. Make sure to provide an Observable, Promise, Array, or Iterable when working with Angular Services

I've developed various services to interact with different APIs. The post services seem to be functioning, but an error keeps popping up: ERROR TypeError: You provided 'undefined' where a stream was expected. Options include Observable, ...

angulartypescriptrxjs

Nav bar taking up full width of page, centered to the right with content area

I am facing an issue with aligning my full-width navbar with my fixed content area. The ul keeps changing based on the browser or resolution. Check out this fiddle for reference: http://jsfiddle.net/fwyNy/ subject site CSS Code: #topribbon{ width: 10 ...

htmlcssnavmenubarnavbar

Sharing code between Angular 8 and NodeJS 12: Best practices

Can code be shared between Angular 8 (TypeScript) and NodeJS 12? All the code is located on the same server but in separate directories /client and /server. A major issue we are facing is the duplication of regular expressions and constants across both A ...

node.jsangular

What is causing the image to move to the following line?

(https://i.stack.imgur.com/5oi7s.png) The image appears to be shifting to the next line inexplicably. I have experimented with various methods to address this issue, including utilizing the built-in Image component which seemed to show improvement. However ...

cssreactjsimagenext.js

What makes ngFor unique in Angular that allows it to not require keys like in Vue and React?

I recently delved into learning Angular a few weeks back. In Vue and React, we typically use a unique key when rendering an array of elements to optimize the rendering process, especially when there are changes in the elements' order or quantity. As a ...

javascriptangularangular2-template

Focusing solely on the presence of lowercase characters within the text field

Is it possible to apply a different color to lowercase letters in a text area? I am looking to highlight all lowercase letters in red while keeping the uppercase letters black. ...

csscss-selectors