ある特定の要素にのみ適用され、グローバルではないcssファイルをes6でインポートする方法はありますか？

Question

では、私がコンポーネントを持って反応し、私は、CSSスタイルシートをインポートする

import styles from 'css-stylesheet.css' 

かで

import 'css-stylesheet.css' 

'./MyComponent.jsx' 私だけに、このCSSをしたいしかし

このコンポーネントにのみ適用されます！私はそれが今のようにグローバルであることを望んでいない。私はwebpackを使用しています。ローカルにインポートする方法はありますか？インポートしたファイルにのみ適用しますか？方法があるはずのようですが、私はそれについての質問を見つけることもできません。ここで

あなたはCSS-ローダーを使用している私のWebPACKのCSSローダコード

module: { 
    rules: [{test: /(\.css)$/, loaders: ['style-loader', 'css-loader']}] 
} 

Answer 1

あり、それはあなたがあなたのオブジェクトを返しますオプション

{ 
    loader: "css-loader", 
    options: { 
    modules: true 
    } 
} 

を渡す必要があり、それを可能にするために、css-modulesをサポートしていますCSSをインポートするときはいつでも、そのオブジェクトにはcssセレクタとuglifiedセレクタの間のマップが含まれます。このようにして、スタイルはコンポーネント固有のものになります。

uglifiedセレクタのパターンを定義するには、オプションにフィールドを追加します。 localIdentName:[name]__[local]___[hash:base64:5]