2016-05-10 9 views
1

このライブラリをFlickityというスライドショーに使用しています。このスライドショーでは、CSSファイルflickity.min.cssを使用する必要があります。私のプロジェクトで、私はpostCSSを使用するとき、CSSのような私のコンポーネントにこのflickity.min.css含む:postCSS経由でライブラリからCSSをインポートするには?

@import ./lib/flickity.min 

そのクラスは次のように接頭辞を取得:これでMyComponent__flickity-class_35aw問題は、flickityは新しいDOM要素を作成し、そのクラスに依存しているということですインスペクタでそれのクラスは.flickity-classなので、スタイルは適用されません。正しく挿入する方法を理解しようとしています。セットアップあなたがCSS ModulesとしてCSSをインポートしているように見えます

答えて

2

に+ WebPACKの反応使用

。あなたはちょうどあなたのWebPACKの設定から「モジュール」を削除する必要があるCSSモジュールを使用することを意図していなかった場合、すなわち

loaders: [ 
    { 
     test: /\.css$/, 
     loaders: 'style!css?modules' 
    } 
] 

だけになった場合は:

loaders: [ 
    { 
     test: /\.css$/, 
     loaders: 'style!css' 
    } 
] 

あなたはCSSモジュールを使用したいしかし、もしいくつかのファイルではなく他のものではなく、適切なヒューリスティックに基づいて複数のCSSローダ設定を定義することをお勧めします。あなたの/ lib /ディレクトリに 'global' CSSだけが含まれていると仮定すると、あなたはこれを行うことができます:

loaders: [ 
    { 
     test: /\.css$/, 
     exclude: /lib/, 
     loaders: 'style!css?modules' 
    }, 
    { 
     test: /\.css$/, 
     include: /lib/, 
     loaders: 'style!css' 
    } 
] 
関連する問題