React仅使用来自导入文件的CSS

Question

大家好，我在React项目中的CSS有一个问题

，我有一个称为Header.jsx的组件，header.scss.scss文件已导入，所以我想要从header.scss应用的CSS仅来自任何其他文件（即使className名称相同）。

有一种方法可以用DIV包裹并提供唯一的className，或者使用css-modules，但是可以使用WebPack配置来完成相同的操作？我试图改变一点，但不能让它发生。

以下是我的webpack配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    new MiniCssExtractPlugin(),
  ],
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  devServer: {
    static: path.resolve(__dirname, "dist"),
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /nodeModules/,
        resolve: {
          extensions: [".js", ".jsx"],
        },
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
};