Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2: How to correctly automatically import normalize.css

I am a new Angular 2 user, and I have some problems with it.

Traditionally, we could use <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> to import a css file, but I want to make Angular 2 to automatically import it using import.

I tried to use the same way when I used Material 2:

// angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'normalize-path/index.js',
    ]
  });
};

// system-config.ts 

const map: any = {
  'normalize': 'vendor/normalize-path',
};

/** User packages configuration. */
const packages: any = {
  'normalize': {main: 'index.js'},
};

// app.component.ts

import { normalize } from 'normalize-path';

The editor will complain:

Cannot find module 'normalize-path'.

And the code won't compile. But I really have no idea what was wrong.

like image 769
Garfield550 Avatar asked Jul 16 '16 09:07

Garfield550


People also ask

How do I import normalize?

To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index. css or App.

How do you normalize CSS?

There are two ways to use Normalize in a project: edit the source to customize your own Normalize stylesheet, or use it as a base and add styles on top. The former is a pick-and-choose strategy where you go through the Normalize. css file and delete whatever you don't need to make your own custom stylesheet.

Should I use normalize CSS?

Browsers apply styles to elements before you've written any CSS at all, and sometimes those styles vary. Normalizing your CSS lets you rest assured, knowing that you have the same base layer of styles applied across all browsers.


3 Answers

Update for Angular 8

  1. Install the normalize.css library:

    npm install --save normalize.css
    
  2. 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:

  1. npm i normalize.css
  2. 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
  }
}
like image 92
Nicolas RTT Avatar answered Nov 14 '22 03:11

Nicolas RTT


Based on this answer, all needed to do was:

  1. Install the normalize.css library:

    npm install --save normalize.css
    
  2. Import it in your styles.css

    @import '~normalize.css';
    
like image 24
elpddev Avatar answered Nov 14 '22 02:11

elpddev


The accepted response doesn't seem to be working on app. I needed to remove the ../ in the path name.

The angular.json styles bit should be something like this:

"styles": [
    "node_modules/normalize.css/normalize.css",
    "styles.css"
  ],
like image 5
Stefanie Fluin Avatar answered Nov 14 '22 02:11

Stefanie Fluin