Webpack slow build for Bootstrap 5 - npm

Question

When i import Bootstrap scss in my project, Webpack build is very slow. It is building all Bootstrap dependencies on every code changes. So i have to wait 5-6 sec every file savings. There is any way improve this build time? Maybe build bootsrap only when bootsrap-variables.scss file changed?
Here is my webpack configuration:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const sass = require('sass');
const path = require('path');
module.exports = (env, argv) => {
return {
entry: {
bundle: ['./src/index.js', './src/index.scss'],
admin: ['./src/admin.js', './src/admin.scss'],
print: './src/print.scss',
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].js',
},
optimization: {
minimizer: [
new TerserJSPlugin(),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true,
},
},
}),
],
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['!fonts/**/*'],
output: {
path: path.resolve(process.cwd(), 'dist'),
},
}),
],
devtool:
argv.mode === 'development'
? 'cheap-module-source-map'
: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
'#babel/plugin-proposal-class-properties',
],
presets: ['#babel/preset-env'],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
'resolve-url-loader',
{
loader: 'sass-loader',
options: {
implementation: sass,
},
},
{
loader: 'sass-resources-loader',
options: {
resources: ['./src/scss/_variables.scss'],
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
publicPath: 'fonts',
},
},
exclude: /images/,
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'img',
outputPath: 'img',
},
},
],
},
],
},
externals: {
jquery: 'jQuery',
},
};
};