css-modulesとbootstrapを同時に使うには？

Question

私は自分のプロジェクトに電子反応ボイラープレートを使用しています。このボイラープレートは、スタイリング目的でCSSモジュールを使用しています。 ブートストラップとカスタムスタイルを同じ場所で使用することに問題があります。 はその場合「行」で

<div className="container"> 
    <div className="row custom-css"> 
    // other codes... 
</div> 

は1つのブートストラップ・クラス名と「カスタムCSS」で自分のスタイルのクラス名で、私のようなコードスニペットをしたとします。 は、あなたがこのコンポーネントに固有のモジュールファイルからCSSモジュールのスタイルをインポートする必要が

Answer 1

...私は一緒にブートストラップCSS-モジュールとを使用できるように、これらの問題のいくつかの解決策を見つけるために私を助けてくださいそして...返されたオブジェクトを介してクラス名に

MyComponent.css

.myCustomClassName { 
    color: #fff; 
} 

MyComponent.js

それらを補間しますHTMLとして出力し、このようなものになるであろう10

import styles from './MyComponent.css'; 

<div className=`row ${styles.myCustomClassName}` /> 

...だから、限り、あなたはどこかにブートストラップCSSをロードしているように私はちょっとで立ち往生した両方

Answer 2

に拾うべきである

<div class="row MyComponent__myCustomClassName___n1cC4ge}` /> 

これは（ブートストラップをロードする方法について）。 webpack設定ファイルでこの粗編集を作成しました。

 { 
     test: /(\.bootstrap\.css$|bootstrap-theme.css|bootstrap.css)/, 
     use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader', 
       options: { 
        minimize: true || {/* CSSNano Options */} 
       } 
      }, 
     ], 
    }, 
    { 
     test: /^((?!\.bootstrap|bootstrap-theme).)*\.css$/, 
     use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
      }, 
      { 
       loader: require.resolve('postcss-loader'), 
       options: { 
        // Necessary for external CSS imports to work 
        // https://github.com/facebookincubator/create-react-app/issues/2677 
        ident: 'postcss', 
        plugins:() => [ 
         require('postcss-flexbugs-fixes'), 
         autoprefixer({ 
          browsers: [ 
           '>1%', 
           'last 4 versions', 
           'Firefox ESR', 
           'not ie < 9', // React doesn't support IE8 anyway 
          ], 
          flexbox: 'no-2009', 
         }), 
        ], 
       }, 
      } 
     ] 
    }, 

残りはalechill

によって完全に覆われています