Module parse failed: Unexpected character '@ in "webpack"

Question

I was getting the same error twice, then I tried Webpack Module parse failed with bootstrap css and one error goes away. but I dont know how to resolve this one.

Bellow is a dump from my commandline:

yarn start
yarn run v1.22.15
webpack --progress --watch
assets by status 4.74 MiB [cached] 2 assets
orphan modules 7.78 MiB [orphan] 1725 modules
runtime modules 1.06 KiB 6 modules
built modules 10.9 MiB [built]
  modules by path ./node_modules/ 3.63 MiB
    javascript modules 3.55 MiB 918 modules
    json modules 86.7 KiB
      ./node_modules/iconv-lite/encodings/tables/shiftjis.json 8.78 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/eucjp.json 15.1 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/cp936.json 20.1 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/gbk-added.json 926 bytes [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/gb18030-ranges.json 2.17 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/cp949.json 16.7 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/cp950.json 15.2 KiB [built] [code generated]
      ./node_modules/iconv-lite/encodings/tables/big5-added.json 7.85 KiB [built] [code generated]
  + 14 modules

ERROR in yote.scss 6:0
Module parse failed: Unexpected character '@' (6: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
|  * Third-Party
|  */
> @import 'node_modules/react-datepicker/dist/react-datepicker';
| @import 'node_modules/react-vis/dist/style';
| 
 @ ./app.js.jsx 15:0-21

webpack 5.75.0 compiled with 1 error in 30372 ms

This is my webpack.config.js file

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

const config = {
  devtool: 'cheap-module-source-map'
  , entry: ['./app.js.jsx']
  , output: {
    path: path.join(__dirname, '../server/public/js')
    , filename: 'react-bundle.js'
  },
  // target: 'node',
  mode: 'production'
  , module: {
    rules: [
      {
        test: /\.(sass|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader!sass-loader'],
        exclude: [/node_modules/],
      }
      ,
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  optimization: {
    minimize: true, // if true also works in dev else only in prod
    moduleIds: 'named',
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  resolve: {
    fallback: {
      "util": false,
      "stream": false,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
    
    , new MiniCssExtractPlugin({

filename: '../css/yote.css' }), new HtmlWebpackPlugin() ] }

module.exports = config;