title: how to import global css in react?
body: <p>I am trying to import global css file inside react javascript file. I am importing in following way:</p>
  
  <pre><code>import React from "react";
  import MainWrapper from "./components";
  import "./global.css";
  
  
  const App = () =&gt; {
  
    return (
      &lt;MainWrapper /&gt;
    );
  };
  
  
  export default App;
  </code></pre>
  
  <p>My global.css file looks like following:</p>
  
  <pre><code>
  
  @import '/node_modules/antd/dist/antd.css';
  
  
  
  i.anticon.anticon-menu-unfold.trigger, i.anticon.anticon-menu-fold.trigger {
      margin: auto;
      display: flex;
      justify-content: center;
      padding: 12px;
      color: white;
  }
  i.anticon.anticon-menu-fold.trigger{
      float: right;
  }
  
  
  
  </code></pre>
  
  <p>Here above, I am overidding predefined css of ANT Design. Here it is not able to override ant's  predefined css. </p>
  
  <p>My webpack.config.js looks like following:</p>
  
  <pre><code>const HtmlWebPackPlugin = require("html-webpack-plugin");
  const WebapckManifestPlugin = require("webpack-manifest-plugin");
  
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
                  options: {
                      presets: [
                          "@babel/preset-env",
                          "@babel/preset-react"
                      ],
                      plugins: [
                          "@babel/plugin-syntax-dynamic-import",
                          "@babel/plugin-proposal-class-properties"
                      ]
                  }
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader"
            }
          ]
        },
        // {
        //   test: /\.css$/,
        //   use: [
        //     "style-loader"
        //   ,
        //    "css-loader" 
        //   ]
  
        // }, 
        {
          test: /\.css$/,
          use: 
          [
              {
                  loader: "style-loader",
              },
              // {
              //   loader:  "isomorphic-style-loader",
              // },
              {
                  loader: "css-loader",
                  options: {
                      importLoaders: 1,
                      modules: {
                          localIdentName: "[name]__[local]___[hash:base64:5]"
                      }
                  }
              }
          ]
  
      },
      {
          test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
          loader: "url-loader?limit=100000" }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./public/index.html",
        filename: "./index.html"
      }),
      new WebapckManifestPlugin({
        template: "./public/manifest.json"
      })
    ],
    resolve: {
      extensions: ["*",".js",".jsx"]
    }
  }
  </code></pre>
  
  <p>However, look below. I am importing css file in below js file. It works</p>
  
  <pre><code>import React, { useState }  from "react";
  import { Layout, Menu, Icon } from "antd";
  // import useStyles from 'isomorphic-style-loader/useStyles'
  import style from "./style.css";
  
  const Dashboard = () =&gt; {
  // useStyles(style);
  return(
      &lt;div className={style.dashboard}&gt;
          karan
      &lt;/div&gt;
      );
  };
  
  export default Dashboard;
  </code></pre>
  
  <p>My style.css file looks like this:</p>
  
  <pre><code>.dashboard{
      text-align: center;
  }
  </code></pre>
  
  <p>I think the problem is with webpack.config.js. 
  When I change style syntax from:</p>
  
  <pre><code>className={style.dashboard}
  </code></pre>
  
  <p>To: </p>
  
  <pre><code>className="dashboard"
  </code></pre>
  
  <p>And import statement from:</p>
  
  <pre><code>import style from "./style.css";
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>import "./style.css";
  </code></pre>
  
  <p>And webpack.config.js  <strong>test: /.css$/</strong> to:</p>
  
  <pre><code>{
           test: /\.css$/,
           use: [
             "style-loader"
           ,
            "css-loader" 
           ]
  
         }
  </code></pre>
  
  <p>Everythings works then.</p>