如何在反应中导入全局CSS？

Question

我正在尝试在react javascript文件中导入全局css文件。我以以下方式导入：

import React from "react";
import MainWrapper from "./components";
import "./global.css";


const App = () => {

  return (
    <MainWrapper />
  );
};


export default App;

我的global.css文件如下：

@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;
}

在上面，我覆盖了ANT Design的预定义CSS。在这里，它无法覆盖ant的预定义CSS。

我的webpack.config.js如下所示：

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"]
  }
}

但是，请看下面。我在下面的js文件中导入css文件。有效

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 = () => {
// useStyles(style);
return(
    <div className={style.dashboard}>
        karan
    </div>
    );
};

export default Dashboard;

我的style.css文件如下：

.dashboard{
    text-align: center;
}

我认为问题出在webpack.config.js。 当我从以下方式更改样式语法时：

className={style.dashboard}

收件人：

className="dashboard"

并从以下位置导入语句：

import style from "./style.css";

收件人：

import "./style.css";

和webpack.config.js 测试：/.css $ / 到：

{
         test: /\.css$/,
         use: [
           "style-loader"
         ,
          "css-loader" 
         ]

       }

然后一切正常。