2016-07-16 51 views
10

Sono un nuovo utente Angular 2 e ho alcuni problemi con esso.Angular 2: Come importare correttamente normalize.css

Tradizionalmente, è possibile utilizzare <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> per importare un file css, ma desidero rendere Angular 2 in grado di importarlo automaticamente utilizzando import.

ho cercato di utilizzare lo stesso modo quando usato Materiale 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';

L'editore si lamenterà:

Impossibile trovare il modulo 'normalizzare-path'.

E il codice non verrà compilato. Ma non ho davvero idea di cosa c'è che non va.

+0

Non ha senso: la normalizzazione dei CSS deve essere veramente inclusa come tag di collegamento, non c'è bisogno di complicare eccessivamente. – dfsq

+0

Mi spiace, ma sono solo curioso di sapere come usare normalize.css con Angular .... – Garfield550

risposta

16

Con la (1.0.0-beta.15) versione corrente angolare cli, la soluzione è abbastanza semplice:

  1. npm i normalize.css
  2. aggiungere "../node_modules/normalize.css/normalize.css" in apps[0].styles nel file angular-cli.json
{ 
    "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": [ 
     "styles.css", 
     "../node_modules/normalize.css/normalize.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 
    } 
} 
+3

nota che il cli deve essere riavviato affinché questo abbia effetto – Blauhirn

+1

C'è un metodo migliore per caricare ora. In styles.css (o styles.scss se usi sass) aggiungi '@import '~ normalize.css';' dopo aver eseguito 'npm install --save normalize.css'. '' 'Indica l'importazione come modulo nodo. Il package.json del modulo 'normalize' punta al file .css corretto. Ho provato questo con Angular v5, ultima CLI, con 'ng serve --prod' e' --aot' – Ryan

0

// angular-cli-build.js 
 

 
module.exports = function(defaults) { 
 
    return new Angular2App(defaults, { 
 
    vendorNpmFiles: [ 
 
     'systemjs/dist/system-polyfills.js', 
 
     'systemjs/dist/system.src.js', 
 
     'zone.js/dist/**/*.+(js|js.map)', 
 
     'es6-shim/es6-shim.js', 
 
     'reflect-metadata/**/*.+(ts|js|js.map)', 
 
     'rxjs/**/*.+(js|js.map)', 
 
     '@angular/**/*.+(js|js.map)', 
 
     '@angular2-material/**/*.+(js|js.map)', 
 
     'normalize.css/normalize.css' 
 
    ] 
 
    }); 
 
};

e semplice aggiungere il collegamento css a index.html

// index.html 
 
<link href="vendor/normalize.css/normalize.css" rel="stylesheet">

16

Sulla base this answer, tutto doveva fare era:

@import '~normalize.css/normalize.css'; 

Nel file styles.css.

+0

Ha funzionato come un fascino, aggiunto in styles.scss –

+3

Puoi lasciare fuori il secondo 'normalize.css', solo il primo è sufficiente – Ryan