Angular's implementation of CSS inheritance

As I begin my journey with Angular, I am delving into the workings of the styles.scss file in relation to individual css files within component folders. I have observed that styles.scss is loaded upon app bootstrapping, displaying the required styles accordingly. However, we are also importing another stylesheet at the beginning as shown below:

@import "./assets/styles/general-theme.css";

Further down in styles.scss, a variable is defined to store the desired font:

$font-stack: Roboto, Arial, Helvetica, sans-serif;

This variable is then applied using the * selector to assign the font to each element:

* {
    font-family: $font-stack;
}

While this method works throughout styles.scss, it seems that I may need to create another variable in the general-theme stylesheet or explicitly mention the font. Considering that we are unlikely to switch between fonts, I believe this approach should suffice for our needs. Do you think this is a sensible way to achieve this?

cssangular

Answer №1

Utilizing a general SCSS variable file can simplify your workflow as it can be easily implemented across various files. Prior to utilizing any variable, ensure that the variable file is imported and accessible throughout your SCSS files. As mentioned by @Pete, including the import statement before importing the theme is crucial.

styles.scss

@import "./theme/_variables";
@import "./theme/_general-theme";
...

Alternatively, you can include the import statement for the variables within the theme file itself.

_general-theme.scss

@import "_variables";
...

The key rule to remember is to always import the _variables.scss file before utilizing any variables. This applies even when incorporating _variables within individual component style files if they are in SCSS format.

app.component.scss

@import "../theme/_variables";

p {
  font-family: Lato;
  color:$s-color;
  text-shadow: $text-shadow;
}

Experience the stackblitz demo here 🚀🚀

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

Utilize a personalized hyperlink to encase an Instagram embed

I'm currently trying to display a list of Instagram embeds, but I'd like users to be able to visit a display page before being directed to the actual Instagram embed page. My idea is to enclose each Instagram embed within a hyperlink for this pu ...

javascripthtmlcssinstagram

What purpose does setting the background color serve for me?

I'm feeling a bit perplexed about this situation. I've been trying to make a textarea inside a div function properly in IE7, IE8, and IE9, and accidentally changing the styling from "none" to a color seemed to do the trick. Could someone shed so ...

htmlcssinternet-explorer-8internet-explorer-7internet-explorer-9

Adding a three-dimensional effect by rotating an image with CSS

Hey there, I'm attempting to incorporate both rotation animation and perspective in CSS. It seems that I can only get one or the other to work, as shown below: .vinyl { width: 200px; display: block; margin: auto; opacity: 0.8; tra ...

htmlcssimageperspective

What is the best way to prevent ticks from extending beyond the left side of the chart?

I am currently using Chart.js to create a multi-line chart. However, I am facing an issue where the first tick extends beyond the left side of the chart, causing the entire chart to shift over. I would like to find a solution where the first tick does not ...

angularchart.js

Encountering an error with the Typescript 'any' type in Ionic 2

I need help understanding an error I encountered: EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/search/search.html:17:14 ORIGINAL EXCEPTION: Cannot find a differ supporting object 'function () { return [ { ...

typescriptangularionic2

What is the method to replace the default font family in Bootstrap?

Adding my own unique style with CSS @font-face { font-family: 'CustomFont'; src: url(./fonts/custom/CustomFont.otf); } h4.CustomFont-style { font-family: 'CustomFont', sans-serif !important ; } Using the custom fo ...

htmlcssbootstrap-4

Every symbol located at the top of the <td> element

SOLVED by P. Leger: In my CSS I just modified the vertical-align property to top, which successfully resolved the issue for me I am working on creating a basic schedule system where the admin has the ability to manage users and assign them to specific dat ...

htmlcssimage

Strangely, the combination of BehaviorSubject, async pipe, and *ngIf in Angular is causing unexpected behavior: ngOnChanges is detecting a change that should not

I am facing an issue with two components in Angular - the Parent component fetches data from the server and the Child component displays the fetched entries as a list, but only if the list is not null or empty. The problem I am encountering can be summari ...

angularrxjsangular-ng-ifbehaviorsubject

Encountering an error in Angular: Module '@angular-devkit/core' not found

Whenever I run ng serve on my fresh Angular project, I encounter the following error: module.js:538 throw err; ^ Error: Cannot find module '@angular-devkit/core' What could be causing this issue? ...

angularbuild

Webpack seems to be failing to apply certain styles correctly

Currently, I am in the process of learning how to bundle modules together using webpack. However, I have encountered a roadblock along the way. Within my src folder, there is a CSS file named style.css, a JS file named home.js which contains a function, an ...

javascriptcsswebpack

Issue found (in promise): Invalid Syntax detected at script.js line 8, character 42

I am in the process of developing a tool that retrieves ROBLOX asset IDs using this particular API. I am utilizing the product info function through an API GET request. Despite being near completion, I keep encountering the error Uncaught (in promise) Synt ...

javascripthtmlcssroblox

Tips for preventing chunk loading in webpack: [Angular] [inline js]

Currently, I am working on bundling an Angular project into a single file that includes JS, CSS, and HTML. So far, I've successfully integrated the HTML and CSS, and have made the JS inline using HtmlWebpackInlineSourcePlugin. The minified JS files ge ...

javascriptangularwebpackinlinehtml-webpack-plugin

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser. Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature. https://i.sstatic.net/aAvVW.jpg H ...

javascriptcssextjsbrowserextjs5

Why isn't updating style when ng-class is changed?

In the code below, I am struggling with applying styling based on a dynamic value: Pug: div(ng-class="('{{selectedMessageType}}' == 'incoming')?'messageTypeSelected':'messageTypeNotSelected'") CSS: .messageTypeSe ...

cssangularjs

Issue with background in list items

I am struggling with aligning the background of my vertical menu to the right and center from the top. Here is the code I have tried: ul.nav { margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Go ...

css

Angular 2: Issue with Input Controls losing value within a form element using ngFor

After developing a page in Angular2 that utilizes a form tag and renders input controls using ngFor within a table tag, I encountered an issue where selected input values are removed upon adding a new row. However, everything works fine when the form tag i ...

htmlangularangular2-templateangular2-formsangular2-directives

Can you explain the significance of (.browser-default).valid?

While exploring some code online, I came across this snippet: input[type=text]:not(.browser-default).valid. I understand the purpose of the :not selector in this code, but I have a couple of questions: What is the role of (.browser-default) in this c ...

css

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

htmlcss

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

The hamburger menu is malfunctioning and spilling over

// App.js import './App.css'; function App() { return ( <div className='navbar'> <label className="hamburger-menu"> <input type="checkbox" /> </label> <div class ...

cssreactjs