Webpack 5 can't compile boostrap

I've manage to compile my project scss files into separate css files. But whenever I add Bootstrap dependency, it fails.

Here's my solution.

This is the content of the styles file I want to compile:

// main.scss file
@import './theme';
@import './variables';
@import '~bootstrap/scss/bootstrap';
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css');
@import './lib';
@import './default';

This is the webpack configuration file:

module.exports = {
    mode         : 'production',
    entry        : {
        'styles' : './src/styles/main.scss'
    },
    optimization : {
        splitChunks : {
            cacheGroups : {
                styles : {
                    name    : 'styles',
                    type    : 'css/mini-extract',
                    chunks  : 'all',
                    enforce : true
                }
            }
        }
    },
    module       : {
        rules : [
            require('./rules/sass'),
            urlLoader([ 'png', 'jpe?g', 'gif', 'svg' ], 'images'),
            urlLoader([ 'aac', 'flac', 'mp3', 'mp4', 'ogg', 'wav', 'webm' ], 'media'),
            urlLoader([ 'eot', 'otf', 'ttf', 'woff2?' ], 'fonts')
        ]
    },
    plugins      : [
        new MiniCssExtractPlugin({
            filename      : '[name].css',
            chunkFilename : '[id].css'
        })
    ]
}

And here is the loader set-up for styles:

// ./rules/sass.js
{
    test                            : /.s?(a|c)ss$/i,
    exclude                         : /node_modules/,
    use                             : [
        {
            loader                  : MiniCssExtractPlugin.loader,
        },
        {
            loader                  : 'css-loader',
            options                 : {
                sourceMap           : !isPro
            }
        },
        {
            loader                  : 'postcss-loader',
            options                 : {
                sourceMap           : !isPro,
                postcssOptions      : {
                    plugins         : [
                        require('postcss-preset-env'),
                        require('postcss-url'),
                        require('autoprefixer')
                    ]
                }
            }
        },
        {
            loader                  : 'sass-loader',
            options                 : {
                sourceMap           : !isPro
            }
        }
    ]
}

But at the end, got this problem:

ERROR in ./src/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 25
    at /Volumes/Projects/com.github/adhara/uiadhara/src/styles/main.scss:6:7951
    at Parser.error (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss/lib/container.js:194:18
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss/lib/container.js:105:16)
    at processResult (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/webpack/lib/NormalModule.js:721:19)
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/webpack/lib/NormalModule.js:827:5
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Volumes/Projects/com.github/adhara/uiadhara/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Volumes/Projects/com.github/adhara/uiadhara/node_modules/postcss-loader/dist/index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.54.0 compiled with 2 errors in 3928 ms

I have tested out to comment the bootstrap import line, and the output is generated without any issue.

Seems that I'm missing sth related with the postcss configuration.