web-dev-qa-db-ja.com

Angular2のコンポーネントに複数のスタイルシートをロードする

Angular2アプリケーションを構築しています。同じコンポーネントに複数のスタイルシートをロードしようとすると、複数の問題が発生します。これが私がやっていることのコードです：

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

@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
    './style1.css',
    './style2.css'
    ]
})
export class MyTagComponent{}

今ここに私の問題があります：

このような他のディレクトリからcssファイルを含めようとすると：

styleUrls: [
    './style1.css',
    '../public/style2.css'
]

エラーが出る

Uncaught Error: Expected 'styles' to be an array of strings.

ブラウザコンソールで。

次に、2番目のスタイルシートstyle2.cssをコンポーネントのディレクトリに含め、最初のスニペットを記述しました。現在、スタイルが読み込まれていますが、グローバルに読み込まれています。 2番目のスタイルシートにはbootstrapと衝突するクラス名があり、ブートストラップのスタイルの代わりに2番目のスタイルシートのスタイルがグローバルに適用されています。つまり、他のコンポーネントのテンプレートは2番目のスタイルシートからスタイルされています。

styleUrlsに記載されているURLをコンポーネントにのみ適用し、他のコンポーネントに害を与えてはいけませんか？

グローバルに適用せずに特定のコンポーネントの複数のcssファイルをロードする方法を誰かに教えてもらえますか？.

次の回避策も試しましたが、作成したすべてのコンポーネントにスタイルが適用されています。

styles: [
      require('./style1.css').toString(),
      require('../public/style2.css').toString()
 ]

追伸プロジェクトのモジュールバンドルとしてwebpackを使用しています。

webpack.config（抜粋）

 {
    test: /\.css$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
  },
  {
    test: /\.css$/,
    include: helpers.root('src', 'app'),
    loader: 'raw'
  }
csstwitter-bootstrapangularwebpackstyles
6
kanra-san

私はこのアプローチが使用されるのを見てきました：

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

App.component.cssには複数のインポートがあるため、次のようになります。

@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css');
@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css');

これがお役に立てば幸いです。

14
davaus

TemplateUrlおよびstyleUrlsメタデータプロパティをそれぞれ設定して、テンプレートおよびCSSファイルを含めます。これらのファイルはコンポーネントと同じ場所にあるため、アプリケーションのルートへのパスを指定する必要なく、名前でそれらを参照すると便利です。

Angularは、コンポーネントメタデータのmoduleIdプロパティをmodule.idに設定して完全なURLを計算する方法を変更できます。

@Component({
  selector: 'my-tag',
  moduleId: module.id,
  templateUrl: 'my-tag.component.html',
  styleUrls:  ['style1.css', 'style2.css']
})
export class MyTagComponent { }

pdate＃1

webpackの場合：

Webpack設定でCSSに「to-string-loader」を使用してみてください。

{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }

うまくいきますように。

1
Avnesh Shakya

私believe問題は、ExtractPlugin.extract（loader：options | object）に渡す 'style'引数にあります。私はそれがこのローダーを参照していると思います： https://github.com/webpack/style-loader DOMにスタイルタグを追加し、スタイルをグローバルに適用します。

私は先日この問題に遭遇し、この投稿のために上記の正当化を調べただけで、戻ってそれを念頭に置いて適切に修正する必要がありますが、次のようにcss-loaderを使用するだけで回避できました：

  {
    test: /\.css$/,
    loader: "css-loader"
  }

また、カプセル化をViewEncapsulation.Nativeに設定し、前述したように、ロードされたCSSで.toString（）を呼び出します。ただし、「スタイル」ローダーを削除しても、ExtractTextPluginを代わりに使用できると思います。

0
James