How to use Bootstrap 5 RTL with angular cli

Question

Bootstrap 5 has RTL support as they said in their document they use RTLCSS for handling RTL styles. In order to integrate RTLCSS with angular, I used ngx-build-plus and custom-webpack plugin to inject RTLCSS webpack rule into angular however when I compile angular with my webpack config It gives me errors I tried both ngx-build-plus and custom-webpack but both of them have errors when I clear my webpack rule my project compile successfully so there are no problems with my scss files it must be a webpack config problem but I couldn't find it. Here is my custom webpack js file

const rtlcss = require('rtlcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
            'sass-loader',
          {
            loader: 'postcss-loader', options: {
              postcssOptions: {
                plugins: [autoprefixer, rtlcss]
              },
            }
          },
        ],
      },
    ],
  },
};

As you can see I want to pass all my scss to go through rtlcss and autoprefixer. And here is the compile error:

./src/styles.scss - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected hex digit.
     ╷
1901 │   unicode-range: U+0600-U+06FF;
     │                         ^
     ╵
  src\styles.scss 1901:25  root stylesheet
    at processResult (node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:713:19)
    at node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:819:5
    at node_modules\@angular-devkit\build-angular\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at node_modules\@angular-devkit\build-angular\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (node_modules\@angular-devkit\build-angular\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback node_modules\@angular-devkit\build-angular\node_modules\sass-loader\dist\index.js:54:7)
    at Worker.<anonymous> (node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134:25)
    at Worker.emit (events.js:400:28)
    at MessagePort.<anonymous> (internal/worker.js:215:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)

I realized that this is related to my font-family styles which I used unicode-range so I removed all of my font family in order to see if it compile or not and got another error:

./src/styles.scss - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
src\styles.scss:10805:25: Can't resolve './ajax-loader.gif' in 'src'
    at Object.emitError (node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:562:6)
    at Declaration (node_modules\@angular-devkit\build-angular\src\webpack\plugins\postcss-cli-resources.js:145:28)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async LazyResult.runAsync (node_modules\@angular-devkit\build-angular\node_modules\postcss\lib\lazy-result.js:411:15)
    at async Object.loader (node_modules\@angular-devkit\build-angular\node_modules\postcss-loader\dist\index.js:97:14)

So as I said this is not related to my scss files and something is wrong with my custom webpack because when I remove my webpack rule my project compile successfully.