Angular 2: Cómo importar correctamente y automáticamente normalize.css

Después de tanto batallar hemos hallado la solución de este enigma que algunos los lectores de nuestro sitio web han presentado. Si tienes algo más que compartir no dudes en aportar tu conocimiento.

Solución:

Actualización para Angular 8

1. Instale la biblioteca normalize.css:

   npm install --save normalize.css
   

2. Importarlo en tus estilos.css

   @import '~normalize.css';
   

---

con la corriente (1.0.0-beta.15) versión de angular-cli, la solución es bastante fácil:

1. npm i normalize.css
2. agregar "../node_modules/normalize.css/normalize.css" en apps[0].styles en el archivo de configuración angular-cli.json

Nota: Si usa Angular 7, el archivo de configuración ahora es angular.jsony la ruta a normalise.css en apps[0].styles debiera ser "../node_modules/normalize.css/normalize.css".

Ejemplo:

  "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
  

Basado en esta respuesta, todo lo que tenía que hacer era:

1. Instale la biblioteca normalize.css:

   npm install --save normalize.css
   

2. Importarlo en tus estilos.css

   @import '~normalize.css';
   

La respuesta aceptada no parece funcionar en la aplicación. Necesitaba quitar el ../ en el nombre de la ruta.

los angular.json bits de estilos debe ser algo como esto:

"styles": [
    "node_modules/normalize.css/normalize.css",
    "styles.css"
  ],

Te mostramos las comentarios y valoraciones de los lectores

Si te ha sido de utilidad nuestro artículo, agradeceríamos que lo compartas con más entusiastas de la programación y nos ayudes a difundir este contenido.

---

---

Utiliza Nuestro Buscador