Góc 2: Cách nhập tự động một cách chính xác normalize.css

Question

Tôi là người dùng Angular 2 mới và tôi có một số vấn đề với nó.

Theo truyền thống, chúng tôi có thể sử dụng <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> để nhập tệp css, nhưng tôi muốn làm cho Angular 2 tự động nhập bằng cách sử dụng import.

Tôi cố gắng để sử dụng cách tương tự khi tôi sử dụng vật liệu 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';

Biên tập viên sẽ phàn nàn:

Không thể tìm thấy mô-đun 'bình thường hóa-path'.

Và mã sẽ không biên dịch. Nhưng tôi thực sự không biết có gì sai.

Answer 1

Với sự hiện hành (1.0.0-beta.15) phiên bản của góc-cli, giải pháp khá dễ dàng:

1. npm i normalize.css
2. thêm "../node_modules/normalize.css/normalize.css" trong apps[0].styles trong 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 
    } 
} 

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

và đơn giản thêm vào liên kết css index.html

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

Answer 3

Dựa trên this answer, tất cả cần phải làm là:

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

Trong file styles.css.