Angular-cli Webpack 第 3 部分 css 文件

Question

我刚搬到angular-cli 1.0.0-beta.11-webpack.2
有很多烦人的事情，但我面临的最大问题是外部 css 文件（可能我也会遇到 js 文件的问题）。

在我的项目中使用了Angular2 material，而menu component 需要overlay.css。当我将它包含在index.html 中时：

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

在ng serve 或ng build 之后，dist 文件夹中的覆盖css 文件丢失。

angular-cli github 上有 issue。我完全按照提到的方式做了所有事情，但仍然无法正常工作。

我在

中创建了一个 assets 文件夹和 styles.css 文件

• 源代码
• src/app

我的angular-cli.json 文件看起来像：

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

我想问一下如何在我的项目中包含一个库 css 文件（第 3 部分 css），以便我可以利用 angular-cli webpack 的好处？

Answer 1

您的答案在于angular-cli.json 中提供的新styles 和scripts 配置设置。解决css注入有两种选择：

外部样式

选项 1

只需将 css 文件的路径直接包含在 styles 数组中，如下所示：

//-- angular-cli.json --//

{
   //... 
 “apps”: [
   {
   //... 
   “styles”: [
     “styles.css”,
     “../node_modules/@angular2-material/core/overlay/overlay.css”
   ],
   “scripts”: [],

     // ...
    }
   }
 ], 

选项 2

您可以将overlay.css导入cli生成的src/styles.css文件中：

/* scr/styles.css */

@import "../node_modules/@angular2-material/core/overlay/overlay.css";

如果您使用选项 2，请确保删除选项 1 中所示的对 overlay.css 的引用。

注意：angular-cli.json 是一个配置文件，因此您需要在对其进行更改时重新启动服务器。

你可以找到更多angular-cli 1.0.0-beta.11-webpack.2details here。

外部脚本

与注入外部样式类似，您可以通过使用 angular-cli.json 中的scripts:[] 数组来注入外部脚本。此处添加的任何脚本都将加载到 window 对象。这对于需要从 window 对象访问 jQuery 的插件特别方便。更多关于这个here。

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],

Answer 2

如果您升级到1.0.0-beta.11-webpack.3 或更高版本，您可以使用angular-cli.json 的apps[0].styles 属性列出要导入的外部样式表。

要从1.0.0-beta.11-webpack.2 升级，请运行：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.11-webpack.3

注意：如果在运行 ng version 时遇到 SyntaxError: Unexpected token ... 错误，您可能需要 Node.js 6 才能使 angular-cli@1.0.0-beta.11-webpack.3 正常工作。详情请见https://github.com/angular/angular-cli/issues/1883。

如果您生成一个新项目，您的 angular-cli.json 应该如下所示（注意 styles 属性）：

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "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"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

Answer 3

Angular CLI Wiki Stories 页面有一个 "Thirdparty Installation" 部分：

ng new my-todo-app
ng install sass

---

另外，请参阅自述文件的 Global Library Installation 部分：

npm install bootstrap@next

然后将需要的脚本文件添加到angular-cli.json的apps[0].scripts：

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

最后将 Bootstrap CSS 添加到 apps[0].styles 数组中：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

如果您正在运行它，请重新启动 ng serve，Bootstrap 4 应该可以在您的应用上运行。

Answer 4

我认为您不需要将您的 css 文件包含在 index.html 中，而是包含在您的 ts 文件中。您可以像这样简单地对您的 css 文件进行导入

import "yourcssfile.css"

如果您只想在组件中使用它们，那么您可以使用styleUrl

 styleUrls: ['yourfile.css']

angular2 webpack seed with angular2material