can't use scss loader to config webpack

Question

I've just started using Webpack and it's quite complicated for me. After many hours I understood that it just supports JS/JSON to build but we can handle other types with loader. So far I have succeeded to load .css files with the below config

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            modules: true,
                        },
                    },
                ],
                include: /\.module\.css$/,
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
                exclude: /\.module\.css$/,
            },
        ]
    }

but now I want to make another config to load SCSS but I'm failed with every try. please guide me.

I also tried to install many packages to load scss such as

npm install sass-loader sass webpack --save-dev

and after that, I changed webpackconfig to :

module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },

but it still can't build it and give me the following command: You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file