Angular 2:如何正确自动导入normalize.css

Question

我是一个新的Angular 2用户,我遇到了一些问题.

传统上,我们可以使用<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />导入css文件,但我想让Angular 2自动导入它import.

当我使用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';

编辑会抱怨:

找不到模块'normalize-path'.

代码将无法编译.但我真的不知道出了什么问题.

Answer 1

使用1.0.0-beta.15angular-in版本的angular-cli,解决方案非常简单:

1. npm i normalize.css
2. 添加"../node_modules/normalize.css/normalize.css"在apps[0].styles在配置文件angular-cli.json

注意:如果使用Angular 7,配置文件现在是angular.json,而normalise.css的路径apps[0].styles应该是"../node_modules/normalize.css/normalize.css".

例:

npm install --save normalize.css

Answer 2

基于这个答案,所有需要做的是:

npm install --save normalize.css

在styles.css文件中.

Answer 3

接受的响应似乎不适用于应用程序。我需要删除../路径名称中的。

该angular.json款式位应该是这样的：

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