react css overiding classes from different files

Question

I have a react project where i am using a header component which is as follows -

import React from "react";
import "./index.scss";

const Headers = () => 

  return (
    <div className="header row flex-middle">
     
      <div className="col col-center">
        <span>xxxxxxxx</span>
      </div>
    </div>
  );
};

export default Headers;

as u can see i have imported a css file from path "./index.scss" which has the following css code

.header {
    background-color: yellow;
  }

now i have a different css file in a different path with the same className and

background-color: red;

, even though that css file is not imported in this jsx component, it is overwriting the css of my local file which was initially

background-color:yellow;

I tried resolving the issue with the help of some loaders in webpack configs since i do not want to use css-modules or any other stuff Here is my configuration for the same

webpack.config.js

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, // instead of style-loader
          "css-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              modules: true,
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
     
     
    ],
  },

I am not able to figure out what is wrong with my configuration that my local css are overidden with the css from different files not imported