Sharing Top Content from the Angular-sphere.

Angular – Shortcut to Importing Styles Files in Components #javascript #node #nodejs…

  • We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI – Let’s explore another option for importing style files: – A Sass Variables Sample – Let’s say you have a _variables.scss in your src/stylings folder: – // your folder structure – -…
  • /stylings/ – – h1 { – color: $brand-color; – } – What if you have duplicated file name in paths?
  • /stylings2″ – ] – } – – }] – } – Update your hello.component.scss file, – // hello.component.scss – @import “variables”; – – h1 { – color: $brand-color; – font-size: $font-size-large; – } – Restart your dev server.
  • angular.cli.json file to include bootstrap path, – { – … – “apps”: [{ – “root”: “src”, – … – “stylePreprocessorOptions”: { – “includePaths”: [ – “.”
  • /stylings”, – ] – } – – }] – } – Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following, – // hello.component.scss – @import “variables”; – @import “stylings2/variables”; – @impoer “bootstrap/variables”; – – h1 { – color: $brand-color; – font-size: $font-size-large; – font-family:…

In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

Let’s explore another option for importing style files:

A Sass Variables Sample

Let’s say you have a _variables.scss in your src/stylings folder:

// your folder structure

– src

– app

– app.component.ts

– hello

– hello.component.html

– hello.component.scss

– hello.component.ts

– …

– stylings

– _variables.scss

// your _variables.scss file

$brand-color: #800000;

Reference to the Variables file

Below is our hello.component.html file, let’s style the header with our brand-color.

!– hello.component.html —

h1

Hello World!

/h1

The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

// hello.component.scss

@import “../../../stylings/variables”; // this is not cool!

h1 {

color: $brand-color;

}

See the ../../../stylings/ syntax? Do you like it?

Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of…

Angular