Angular 2: How to Correctly Automatically Import Normalize.CSS

Angular 2: How to correctly automatically import normalize.css

Update for Angular 8

Install the normalize.css library:
```
npm install --save normalize.css
```
Import it in your styles.css
```
@import '~normalize.css';
```

With the current (1.0.0-beta.15) version of angular-cli, the solution is quite easy:

npm i normalize.css
add "../node_modules/normalize.css/normalize.css" in apps[0].styles in the config file angular-cli.json

Note: If using Angular 7, the config file is now angular.json, and the path to normalise.css in apps[0].styles should be "../node_modules/normalize.css/normalize.css".

Example:

{
  "project": {
    "version": "1.0.0-beta.15",
    "name": "normalize.css-in-angular2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "../node_modules/normalize.css/normalize.css",
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

How to import CSS from node_modules in webpack angular2 app

You won't be able to import any css to your vendors file using that stack, without making some changes.

Why? Well because this line:

import 'bootstrap/dist/css/bootstrap.css';

It's only importing your css as string, when in reality what you want is your vendor css in a style tag. If you check config/webpack.commons.js you will find this rule:

 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader']
 },

This rule allows your components to import the css files, basically this:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],

In the AppComponent there's no encapsulation, because of this line encapsulation: ViewEncapsulation.None, which means any css rules will be applied globally to your app. So you can import the bootstrap styles in your app component:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],

But if you insist in importing to your vendor.ts then you will need to install a new loader, npm i style-loader --save-dev this will allow webpack to inject css to your page. Then you need to create a specific rule, on your webpack.common.js and change the existing one:

 { //this rule will only be used for any vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
 },

The firs rule will be only applied when you try to import css, from any package inside node_modules the second rule will be applied to any css that you import from outside the node_modules

How do you reset/normalize your css using google material design (angular4)?

Yes using normalize css is a great option. It's what bootstrap uses anyways. Use the npm install for latest version: https://github.com/necolas/normalize.css/

Install the normalize.css library:
```
npm install --save normalize.css
```
Import it in your styles.css
```
@import '~normalize.css';
```

angular 2 include css file common to all pages

index.html:

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles/sheet.css"/>
</head>
...

where do you import css in angular2 cli

If you'd like to pull in a style library (bootstrap/font-awesome) you can place the files in the generated public directory.

Within there I create a style directory and place the files in there for example....

[project-root]/public/style/bootstrap.css

When builds run it will take the contents of public and move it to dist...

[project-root]/dist/style/bootstrap.css

And you can reference these files within index.html like so...

<link rel="stylesheet" href="style/bootstrap.css">

How should we handle loading CSS files correctly in an Angular app?

In Angular application, you should not load CSS files like you mentioned in AppComponent File.

You have correctly added bootstrap files in angular.json and this will be suffice to include it in the angular project.

Please remove the import from Appcomponent file and try to build it. I have built several angular applications without any issues ( created via Angular CLI ).

Please let us know the outcome.

Dynamically updating css in Angular 2

Try this

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[Updated]:
To set in % use

[style.height.%]="height">Some stuff in this div</div>

Angular - including CSS file in index.html

Angular CLI have it's own way to initialize your global css/js.

They are located in .angular-cli.json configuration

Locate "styles": and add your css there

Example :

"styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

Hope that helps.

Angular 2: How to Correctly Automatically Import Normalize.CSS