Angular 2: Jak poprawnie automatycznie importować normalize.css

Question

Jestem nowym użytkownikiem Angular 2 i mam z tym pewne problemy.

Tradycyjnie możemy użyć <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> do importowania pliku css, ale chcę, aby Angular 2 automatycznie importował go za pomocą import.

Próbowałem używać w taki sam sposób, kiedy używany materiał 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';

Edytor będzie narzekać:

Nie można odnaleźć modułu 'normalizować-ścieżkę'.

Kod nie zostanie skompilowany. Ale naprawdę nie mam pojęcia, co było nie tak.

Answer 1

z prądem (1.0.0-beta.15) wersji skośne CLI roztwór jest całkiem proste:

1. npm i normalize.css
2. dodać "../node_modules/normalize.css/normalize.css" w apps[0].styles w pliku 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 
    } 
} 

Answer 2

// 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' 
 
    ] 
 
    }); 
 
};

i proste dodanie związku css index.html

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

Answer 3

podstawie this answer, wszystkie potrzebne do zrobienia było:

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

W pliku styles.css.