logo标签列表

Angular-cli Webpack第三方CSS文件

angularwebpackangular-cliangular2-material
9
我刚刚升级到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之后，叠加的css文件在dist文件夹中消失了。

angular-cli github上有一个问题。我按照上面提到的一切都做了，但仍然不起作用。

我在以下路径下创建了assets文件夹和styles.css文件：

  • src
  • 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文件（第三方CSS），以便我可以利用angular-cli webpack的好处？

6个回答
19
你的答案在新的angular-cli.json配置文件中的styles和scripts选项中。有两个解决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详细信息。
外部脚本
与注入外部样式类似，您可以通过在angular-cli.json中使用scripts: []数组来注入外部脚本。添加到此处的任何脚本都将加载到window对象中。这对于需要从window对象访问jQuery的插件特别方便。更多信息请参阅此处。
"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],
1
包含整个文件夹怎么样？使用angular-cli是否有可能实现这一点？ - Denko Mancheski
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": "+"
  }
}
1
Angular CLI维基故事页面有一个"第三方安装"部分：
ng new my-todo-app
ng install sass
此外，请参阅 ReadMe 的 全局库安装 部分：

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 就可以在你的应用程序中工作了。
0

最终在我的电脑上运行成功：

angular-cli@1.0.0-beta.14

并且

webpack@2.1.0-beta.22

...都可以在本地进行安装，使用以下命令：

npm install --save-dev

选择正确的版本组合是使其正常运行的关键。

0

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

import "yourcssfile.css"

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

 styleUrls: ['yourfile.css']

使用Angular2Material的Angular2 Webpack种子项目

我没有使用 angular2 webpack。请查看 angular-cli。据我所知，它将在下一个版本的 angular-cli 中提供 链接。 - Kosmonaft
即使您不使用Angular2 Webpack，而是使用Angular CLI，您也应该能够在主文件中导入CSS，并在整个项目中使用。这与该问题中的全局CSS相同。 - Jorawar Singh
谢谢@MrJSingh。这不是我想要的结果，但我进行了一些更改，使其可以工作。Angular2材料正在创建一个<div class =“md-overlay-container”>，该容器被推到关闭的body标记之前。这意味着我们必须禁用我们组件encapsulation: ViewEncapsulation.None的封装。我希望下一个版本的angular-cli将解决这些问题。 - Kosmonaft
我想我在我的种子中有这个。我也会更新我的答案。如果它有帮助，可以帮助其他人，请接受这个答案。 - Jorawar Singh
0

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

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

应该可以解决问题

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接