ウェブパックCSS-ローダー生成されたCSSクラス名が反応し、ブートストラップ

Question

私はウェブパック用のCSS-ローダーを使用していて、コンフィギュレーションは次のようになります。

loaders: [ 
{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?camelCase&modules') 
}, ...] 

そして、私のJSXファイルに私が何かを持っています

import styles from 'components/MyComponent/style.css' 

export default class MyComponent extends React.Component { 
    render() { 
     return (
      return <div className={styles.myComponent}> 
       <Media> 
        <Media.Left> 
        ... 
        </Media.Left> 
        <Media.Body> 
        ... 
        </Media.Body> 
       </Media> 
      </div> 
     ) 
    } 
} 

そして、私のcomponents/MyComponent/style.cssファイルに私のようなものがあります：

.myComponent .media-left { 
    vertical-align: middle; 
} 

だから、私のプロに、このようなblemは、css-loaderは、.myComponentと.media-leftの両方のランダムIDを生成しますが、これは重大な問題です。 .media-leftはブートストラップクラスなので、そのまま残しておきたいです。 css-loaderは、トップレベルのCSSクラスのIDだけを生成する方法はありますか？

Answer 1

私はこれを理解しました。グローバルセレクタは、グローバルにしたい、つまり次のようなものにする必要があります。

.myComponent :global(.media-left) { 
    vertical-align: middle; 
} 

Answer 2

test設定に基づいて、ブートストラップ用のローダーと残りのCSS用のローダーをそれぞれ1台ずつ持つことができます。

また、あなたのcss-loader configのmodules部分は責任あるランダムクラス名です。 localIdentName configを使用して、生成されたクラス名を好きなようにフォーマットすることができます。