9

我刚搬到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或distng build文件夹中缺少覆盖 css 文件。

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

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

  • 源代码
  • 源/应用

我的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？

4

6 回答 6

19

styles您的答案scripts在angular-cli.json. 解决css注入有两种选择：

外部样式

选项1

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

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

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

     // ...
    }
   }
 ],

选项 2

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

/* 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 的插件特别方便。更多关于这个here。

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],
于 2016-08-25T18:15:13.080 回答
2

如果您升级到1.0.0-beta.11-webpack.3或更高版本，您可以使用 的apps[0].styles属性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注意：如果您在运行时遇到SyntaxError: Unexpected token ...错误，您可能需要 Node.js 6 才能正常工作ng version。有关详细信息，请参阅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": "+"
  }
}
于 2016-08-30T13:36:24.200 回答
1

Angular CLI Wiki Stories 页面有一个“第三方安装”部分：

ng new my-todo-app
ng install sass

此外，请参阅自述文件的全局库安装部分：

npm install bootstrap@next

然后将所需的脚本文件添加到angular-cli.json's 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 应该可以在您的应用程序上运行。

于 2016-10-24T14:42:10.347 回答
0

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

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

应该做的伎俩

于 2016-12-05T08:04:54.353 回答
0

最后，它对我有用

angular-cli@1.0.0-beta.14

和

webpack@2.1.0-beta.22

...都在本地安装

npm install --save-dev

正确版本的组合是使其工作的关键。

于 2016-09-23T06:46:07.130 回答
0

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

import "yourcssfile.css"

如果您希望仅在组件中使用它们，那么您可以使用styleUrl

 styleUrls: ['yourfile.css']

angular2 webpack 种子与 angular2material

于 2016-08-18T12:38:40.583 回答