Webpack css loader issue while making server side rendering- React

Question

I made an SSR project with basic requirements everything was fine until I used CSS in my project for styling but I got an error that the loader is not there for understanding CSS so I modified my Webpack config using the Webpack-config file for the server as

    module.exports = {
    entry:  "./src/server/index.js",
    target: 'node',
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.js$|jsx/,
          exclude: /node_modules/,
          use:["css-loader","style-loader"],
          loader : "babel-loader",
          options: {
            "presets": [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "esmodules": true
                  }
                }
              ],
              "@babel/preset-react"
            ]
          }

        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
        }
      ]
    },
    output: {
      path: __dirname + "/dist",
      filename: "bundle.js"
    },
  }

and webpack-config file for the client:

    module.exports = {
    entry:  "./src/client/index.js",
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.js$|jsx/,
          exclude: /node_modules/,
          loader : "babel-loader",
          options: {
            "presets": [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "esmodules": true
                  }
                }
              ],
              "@babel/preset-react"
            ]
          }

        },
        {
          test: /\.css$/,
          loader: ['style-loader', 'css-loader']
        }
      ]
    },
    output: {
      path: __dirname + "/public",
      filename: "bundle.js"
    },
  }

used navigation.css file with some css code but I am getting an error

    webpack://react-ssr-latest/./src/client/component/navigation.css?:1
    throw new Error("Module parse failed: Unexpected token (1:0)\nYou may need an 
    appropriate loader to handle this file type, currently no loaders are configured to 
    process this file. See https://webpack.js.org/concepts#loaders\n> *{\n|     padding: 
    0px;\n|     margin: 0px;");
    ^

    Error: Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are 
    configured to process this file. See https://webpack.js.org/concepts#loaders
    > *{
    |     padding: 0px;
    |     margin: 0px;
    at eval (webpack://react-ssr-latest/./src/client/component/navigation.css?:1:7)
    at Object../src/client/component/navigation.css (/Users/shreyg/Desktop/React- 
    Practice/SSR-latest/dist/bundle.js:2543:1)
    at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/dist/bundle.js:2930:42)
    at eval (webpack://react-ssr-latest/./src/client/component/Navigation.js?:7:73)
    at Module../src/client/component/Navigation.js (/Users/shreyg/Desktop/React- 
    Practice/SSR-latest/dist/bundle.js:523:1)
    at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/dist/bundle.js:2930:42)
    at eval (webpack://react-ssr-latest/./src/client/component/App.js?:5:69)
    at Module../src/client/component/App.js (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/dist/bundle.js:501:1)
    at __webpack_require__ (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/dist/bundle.js:2930:42)
    at eval (webpack://react-ssr-latest/./src/server/HTMLRenderer.js?:12:79)
    [nodemon] app crashed - waiting for file changes before starting...
    /Users/shreyg/Desktop/React-Practice/SSR- 
   latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:24
                                                throw ruleSetCompiler.error(
                                                ^

    Error: Compiling RuleSet failed: A Rule must not have a 'loader' property when it has 
    a 'use' property (at ruleSet[1].rules[0].loader: babel-loader)
    at RuleSetCompiler.error (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
    at conflictWith (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:24:29)
    at /Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:36:6
    at Hook.eval [as call] (eval at create (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:49:1)
    at RuleSetCompiler.compileRule (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:177:19)
    at /Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
    at RuleSetCompiler.compileRule (/Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:184:30)
    at /Users/shreyg/Desktop/React-Practice/SSR- 
    latest/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
    ERROR: "dev:webpack-server" exited with 1.