Question

在我的角度应用1中，我曾经将library.css和application.css中的所有css捆绑在一起。虽然这可以通过角度2以相同的方式对普通css完成，但是有一个新功能允许“组件css”。据我所知，Angular只需下载css文件，然后对其进行处理以添加一些id，以免互相干扰。

现在，如果我只是捆绑所有这些css'es，Angular将无法找到它们。完全可以捆绑组件css吗？也许存在类似于捆绑HTML的方式，其中HTML实际上是将.js作为字符串放入？

Answer 1

我设法通过webpack和特殊angular2-template-loader plugin来实现这一目标。这是来自webpack 2的配置：

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

基本上它做了什么，它用内联templateUrl和styleUrls替换template和styles，并将它们作为单独的“模块”存储在字符串中。

它是如何运作的

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

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

P.S。整个设置可以在Anagular tutorial中找到。

Answer 2

如果你有

，这些是加载器的组合

templateUrls 和 styleUrls

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

            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [root('src/index.html')]
            },


            {
                test: /\.css$/,
                loader: 'to-string-loader!css-loader'
            }

        ],

并在代码中

@Component({
  selector: 'my-app',
   templateUrl: 'sub.component.html',
 styleUrls: ['app.component.css']

})

export class AppComponent {

}

如何捆绑Angular 2组件css？

2 个答案: