外部样式

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
的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导入由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.2 details 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或更高版本，则可以使用apps[0].styles的{{1}}属性列出要导入的外部样式表。

要从angular-cli.json升级，请运行：

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时出现angular-cli@1.0.0-beta.11-webpack.3错误，则可能需要Node.js 6才能使SyntaxError: Unexpected token ...正常工作。有关详细信息，请参阅https://github.com/angular/angular-cli/issues/1883。

如果您生成了一个新项目，那么ng version应该看起来像这样（请注意angular-cli.json属性）：

styles

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的{{1}}：

apps[0].scripts

最后将Bootstrap CSS添加到"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],数组：

apps[0].styles

如果您正在运行它，请重新启动"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ],，并且Bootstrap 4应该在您的应用上运行。

Answer 4

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

简单地导入css文件

import "yourcssfile.css"

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

 styleUrls: ['yourfile.css']

angular2 webpack seed with angular2material

Answer 5

最终，它适用于我

angular-cli@1.0.0-beta.14

和

webpack@2.1.0-beta.22

...都在本地安装

npm install --save-dev

正确版本的组合是使其发挥作用的关键。

Answer 6

当我想从primefaces导入PrimeNG时遇到同样的问题但我在我的文件夹中找到了styles.scss ...

@import './../your_file_path/your_file_name';

应该做的伎俩

Angular-cli Webpack第3部分css文件

6 个答案:

外部样式

选项1

选项2

外部脚本