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.
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.
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.
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.
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
"../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
}
}
Based on this answer, all needed to do was:
Install the normalize.css library:
npm install --save normalize.css
Import it in your styles.css
@import '~normalize.css';
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"
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With