0

インライン テンプレートを使用せずに、CSS モジュールを Angular 2 で動作させようとしています。公式のスタイル ガイドでは、3 行以上のマークアップがある場合はインライン テンプレートを使用しないことも提案しています。したがって、私の考えは と の組み合わせを使用することでしlodash-templatesたfile-loaderが、 の出力がlodash-template-loaderによって受け入れられるかどうかはわかりませんfile-loader。これは、コンポーネントを次のように見せたい方法です。

import {Component} from '@angular/core';

var styles = require('./foo.css');

@Component({
    'selector': 'my-component',
    'templateUrl': require('./foo.html')
})
export class MyComponent {

}

の出力、lodash-template-loaderたとえばejs-loaderは、テンプレートのコンパイルに使用されるデータで呼び出す必要がある関数であるため、これが機能しないことはわかっています。stylesテンプレート内でを使用したい場合は、次のようにします。

<div class="<%= styles.root %>"></div>

ejs-loaderしたがって、基本的には、たとえばこれを使用してコンパイルし、それをにパイプして、file-loader個別の html ファイルを取得したいと考えています。これを達成する方法がわかりません。上記は単なるアイデアですが、ステートメントfile-loaderだけでは機能しないため、テンプレートをコンパイルしてパイプする方法がわかりません。require何か案は？

のドキュメントによるとejs-loader、テンプレートをコンパイルするには次のことを行う必要があります。

var template = require("ejs!./foo.html");
template(styles);

template関数はテンプレートを文字列として返すと思います。しかし、それから別の html を作成するにはどうすればよいでしょうか? 私も必要file-loaderですか？

編集

したがって、おそらく解決策は、ファイルとスタイル オブジェクトを受け取るカスタム ローダーを実装することです。次に、ローダーは、に渡すことができる出力を返しますfile-loader。ここでの問題は、スタイル オブジェクトをローダーに渡す方法です。filer-loaderまた、テンプレート文字列を読み取り可能な形式に変換する方法は?

4

1 に答える 1