如何捆绑Angular 2组件css？ [英] How to bundle Angular 2 component css?

问题描述

在我的角度1的应用程序，我用于捆绑所有的css在 library.css 和 application.css 。虽然这可以使用angular 2以相同的方式为普通css，有一个新的功能，允许一个组件css。就我可以看到Angular只是下载css文件，然后处理它添加一些id，以不互相干扰。

In my application for angular 1 I used to bundle all of the css in library.css and application.css. While this can be done with angular 2 the same way for ordinary css, there is a new feature that allows a "component css". As far as I can see Angular just downloads the css file and then processes it to add some id's to not interfere with each other.

现在如果我只是捆绑所有这些css'es Angular将不能找到它们。是否有可能做捆绑组件css？也许类似的绑定HTML的方式存在，其中HTML真正放入.js作为字符串？

Now if I just bundle all of these css'es Angular just won't be able to find them. Is it possible at all to do bundling of component css? Perhaps a similar way to bundling HTML exists, where HTML is really put into .js as string?

推荐答案

与 webpack 和一个特殊的 angular2-template-loader plugin 。这是来自webpack 2的配置：

I managed to achieve this with webpack and a special angular2-template-loader plugin. This is the config from webpack 2:

module: {
   rules: [
   {
      test: /\.ts$/,
      use: ['awesome-typescript-loader', 'angular2-template-loader']
   }

基本上它代替了 templateUrl 和 styleUrls with inline 模板和 styles ，并将它们作为单独的模块存储在字符串中。 / p>

Basically what it does, it replaces templateUrl and styleUrls with inline template and styles and just stores them in a string as a separate "module".

如何工作

How does it work

angular2-template-loader搜索templateUrl和styleUrls
在Angular 2 Component元数据中的声明，并用相应的require语句替换
路径。如果keepUrl = true是
添加到加载器的查询字符串，templateUrl和styleUrls不会分别用模板和样式替换
，所以你可以像文件加载器一样使用加载器
。

The angular2-template-loader searches for templateUrl and styleUrls declarations inside of the Angular 2 Component metadata and replaces the paths with the corresponding require statement. If keepUrl=true is added to the loader's query string, templateUrl and styleUrls will not be replaced by template and style respectively so you can use a loader like file-loader.

生成的require语句将由给定的加载器
处理.html和.js文件。

The generated require statements will be handled by the given loader for .html and .js files.

PS整个设置可以在Anagular 教程中找到。

P.S. The whole set up can be found in Anagular tutorial.

这篇关于如何捆绑Angular 2组件css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！