Angular 2：如何正确自动导入 normalize.css答案

【问题标题】：Angular 2: How to correctly automatically import normalize.cssAngular 2：如何正确自动导入 normalize.css
【发布时间】：2016-11-19 11:17:30
【问题描述】：

我是 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';

编辑会抱怨：

找不到模块“规范化路径”。

而且代码不会编译。但我真的不知道出了什么问题。

【问题讨论】：

没有意义：规范化 CSS 确实必须作为链接标签包含在内，无需过于复杂。
抱歉，我只是好奇如何将 normalize.css 与 Angular 一起使用......

标签： css angular typescript normalize-css

【解决方案1】：

Angular 8 更新

安装 normalize.css 库：
```
npm install --save normalize.css
```
将它导入你的styles.css
```
@import '~normalize.css';
```

使用当前 (1.0.0-beta.15) 版本的 angular-cli，解决方案非常简单：

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

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

示例：

{
  "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
  }
}

【讨论】：

注意需要重启cli才能生效
现在有更好的加载方法。在styles.css（或styles.scss，如果你使用sass）中，在npm install --save normalize.css之后添加@import '~normalize.css';。 ~ 表示作为节点模块导入。 “normalize”模块的 package.json 指向正确的 .css 文件。我已经使用 Angular v5、最新的 CLI、ng serve --prod 和 --aot 对此进行了测试
@Drenai --save 标志有什么作用，“~”是什么意思？我在没有--save 的情况下进行了 npm 安装，但它不起作用。
--save 更新 package.json 文件以包含包。 ~ 告诉 scss 编译器在 node_modules 文件夹中查找导入的 normalize.css

【解决方案2】：

基于this answer，只需：

安装 normalize.css 库：
```
npm install --save normalize.css
```
将它导入你的styles.css
```
@import '~normalize.css';
```

【讨论】：

像魅力一样工作，添加到 styles.scss
第二个normalize.css可以省略，第一个就够了
如果这在您看来好像不起作用，请确保您了解normalize.css 的范围以及它的作用和不作用。例如。我希望 ul 标签被重置为 0 边距，而 reset.css 这样做 normalize.css 没有。如果您不熟悉 normalize.css，请查看 stackoverflow.com/questions/6887336
这将在新版本的 node-sass 上被弃用
@distante 谢谢。计划 are 在 2021 年 10 月之前弃用 @import，并在一年后将其删除。烦人的是，这种语法似乎不适用于@use。 node-sass 的人是planning to provide an importer 以允许从 node_modules 导入。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

然后简单地将css链接添加到index.html

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

【讨论】：