角度2：如何正确自动导入normalize.css


Angular 2: How to correctly automatically import normalize.css

我是Angular 2的新用户，但我遇到了一些问题。

传统上，我们可以使用导入css文件，但是我想使Angular 2使用import自动导入。

使用材料2时，我尝试使用相同的方式：

1
2
3
4
5
6
7
8
9
// angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'normalize-path/index.js',
    ]
  });
};

1
2
3
4
5
6
7
8
9
10
// system-config.ts

const map: any = {
  'normalize': 'vendor/normalize-path',
};

/** User packages configuration. */
const packages: any = {
  'normalize': {main: 'index.js'},
};

1
2
3
// app.component.ts

import { normalize } from 'normalize-path';

编辑将抱怨：

Cannot find module 'normalize-path'.

而且代码不会编译。 但是我真的不知道怎么了。

相关讨论

根据此答案，所有需要做的是：

  • 安装normalize.css库：

    1
    npm install --save normalize.css

  • 以您的styles.css导入

    1
    @import '~normalize.css';
    • 相关讨论

    更新Angular 8

  • 安装normalize.css库：

    1
    npm install --save normalize.css

  • 以您的styles.css导入

    1
    @import '~normalize.css';

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

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

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

    例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    {
     "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
      }
    }
    相关讨论

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

    angular.json样式应如下所示：

    1
    2
    3
    4
    "styles": [
       "node_modules/normalize.css/normalize.css",
       "styles.css"
      ],

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 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

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