title: How to use css-modules with bootstrap?
body: <p>when i using this webpack config, it is showing errors , what could the possible reasons for that and how it can be resolved.is this error due to webpack version if not can you tell how to write webpack config for that.</p>
  
  <blockquote>
    <p>when i using this webpack config, it is showing errors , what could
    the possible reasons for that and how it can be resolved.is this error
    due to webpack version if not can you tell how to write webpack config
    for that.</p>
  </blockquote>
  
  <pre><code>@ ./src/components/Routes/Routes.js
   @ ./src/app.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
  
  ERROR in ./src/components/SignIn/sign.css
  Module build failed: Unknown word (5:1)
  
    3 | // load the styles
    4 | var content = require("!!../../../node_modules/css-loader/index.js?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!../../../node_modules/postcss-loader/lib/index.js??postcss!./sign.css");
  &gt; 5 | if(typeof content === 'string') content = [[module.id, content, '']];
      | ^
    6 | // Prepare cssTransformation
    7 | var transform;
    8 |
  
   @ ./src/components/SignIn/SigninForm.js 25:0-21
   @ ./src/components/SignIn/SigninPage.js
   @ ./src/components/Routes/Routes.js
   @ ./src/app.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
  
  ERROR in ./node_modules/video-react/dist/video-react.css
  Module build failed: Unknown word (5:1)
  
    3 | // load the styles
    4 | var content = require("!!../../css-loader/index.js?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!../../postcss-loader/lib/index.js??postcss!./video-react.css");
  &gt; 5 | if(typeof content === 'string') content = [[module.id, content, '']];
      | ^
    6 | // Prepare cssTransformation
    7 | var transform;
    8 |
  
   @ ./src/components/Image/PlayerContent.js 17:0-65
   @ ./src/components/Image/ImagePage.js
   @ ./src/components/Routes/Routes.js
   @ ./src/app.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
  webpack: Failed to compile.
  </code></pre>
  
  <p>//webpack.config</p>
  
  <pre><code>const path = require('path');
      const webpack = require('webpack');
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
      const autoprefixer = require('autoprefixer')
  
      module.exports = (env) =&gt; {
        // const CSSExtract = new ExtractTextPlugin('styles.css');
        // const BootstrapExtract = new ExtractTextPlugin('bootstrap.css');
        return {
          entry: ['babel-polyfill', './src/app.js'],
          output: {
            path: path.join(__dirname, 'public', 'dist'),
            filename: 'bundle.js'
          },
          module: {
            rules: [
              {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
              },
              {
                test: /\.s?css$/,
                use: [
                  {
                    loader: 'css-loader',
                    options: {
                      sourceMap: true,
                      modules: true,
                      localIdentName: '[name]__[local]___[hash:base64:5]',
                      camelCase: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true,
                      modules: true,
                      localIdentName: '[name]__[local]___[hash:base64:5]',
                      camelCase: true
                    }
                  }
                ]
              },
              {
                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&amp;importLoaders=1&amp;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: () =&gt; [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                          browsers: [
                            '&gt;1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie &lt; 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  }
                ]
              },
              {
                test: /\.(jpg|png|svg|gif|ttf|eot|woff|woff(2))$/,
                use: [
                  {
                    loader: 'file-loader',
                  }
                ]
              }
            ]
          },
          plugins: [
            new webpack.DefinePlugin({
              'process.env.NODE_ENV': process.env.NODE_ENV
            })
          ],
          devtool: 'source-map',
          devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true,
            publicPath: '/dist/'
          }
        };
      };
  </code></pre>