title: Bootstrap not applying CSS using Webpack
body: <p>I'm using Bootstrap with webpack, but when I run my app, no Bootstrap and no CSS is applied.</p>
  
  <p>This is my webpack.config.js  :</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const ManifestPlugin = require('webpack-manifest-plugin');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
      // mode: 'production',
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'build'),
          publicPath: '',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: path.join(__dirname, './build'),
          compress: true,
          port: 3000
      },
      performance: {
          maxEntrypointSize: 512000,
          maxAssetSize: 512000
      },
      module: {
          rules: [
              {
                test: /\.s?css$/,
                use: [
                  {
                    loader: "file-loader",
                    options: {
                      name: "[name].css"
                    }
                  },
                  {
                    loader: "extract-loader"
                  },
                  {
                    loader: "css-loader", 
                  },
                  {
                    loader: "sass-loader"
                  }
                ]
              },
              {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                  loader: "babel-loader"
                }
              },
              {
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
              },
              {
                  test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                  use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                      }
                    }
                  ]
              }
          ]
      },
       //remove comments from JS files
      optimization: {
          minimizer: [
          new UglifyJsPlugin({
              uglifyOptions: {
              output: {
                  comments: false,
              },
              },
          }),
          new OptimizeCSSAssetsPlugin({
              cssProcessorPluginOptions: {
              preset: ['default', { discardComments: { removeAll: true } }],
              }
          })
          ],
      },
      plugins: [
          new MiniCssExtractPlugin({
              filename: "[name].css"
          }),
          new ManifestPlugin(),
          new CleanWebpackPlugin(),
          new HtmlWebpackPlugin({
              template: path.resolve('./public/index.html'),
          }),
      ]
  };
  </code></pre>
  
  <p>I have this kind of error in brower console : </p>
  
  <pre><code>Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
  CssSyntaxError
  
  (192:1) Unknown word
  </code></pre>
  
  <p>I don't have an idea where this error comes from.</p>