Angular-cli Webpack第3部分css文件

Question

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

在我的项目中使用Angular2材料并且menu component需要overlay.css.当我把它包括在index.html:

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

之后ng serve或者dist文件夹中ng build的覆盖css文件丢失了.

有作为的问题上angular-cli github.我完全按照提到的方式做了一切,但仍然无法正常工作.

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

• SRC
• SRC /应用

我的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文件(第三部分css),以便我可以使用它的好处angular-cli webpack？

Answer 1

你的答案就在于新的内styles及scripts在现有配置设置angular-cli.json.解决css注入有两种选择:

外部风格

选项1

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

// - angular-cli.json - //

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

     // ...
    }
   }
 ], 

选项2

你可以导入overlay.css到src/styles.cssCLI所生成的文件:

/* scr/styles.css */

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

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

注意:angular-cli.json是一个配置文件,因此您在更改服务器时需要重新启动服务器.

你可以angular-cli 1.0.0-beta.11-webpack.2 在这里找到更多细节.

外部脚本

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

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

Answer 2

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

import "yourcssfile.css"

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

 styleUrls: ['yourfile.css']

带有 angular2material 的 angular2 webpack 种子