如何将 Bootstrap 5 RTL 与 Angular cli 一起使用

Question

Bootstrap 5 支持 RTL，正如他们在文档中所说，他们使用 RTLCSS 来处理 RTL 样式。为了将 RTLCSS 与 Angular 集成，我使用 ngx-build-plus 和 custom-webpack 插件将 RTLCSS webpack 规则注入 Angular 中，但是当我使用 webpack 配置编译 Angular 时，它给了我错误，我尝试了 ngx-build-plus 和 custom -webpack 但当我清除 webpack 规则时，它们都有错误，我的项目编译成功，所以我的没有问题scss文件没有问题，这一定是 webpack 配置问题，但我找不到它。\n这是我的自定义 webpack js 文件

\n

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

\n

正如你所看到的，我想传递所有的 scss 来通过 rtlcss 和 autoprefixer。\n这是编译错误：

\n

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

\n

我意识到这与我使用的字体系列样式有关unicode-range，因此我删除了所有字体系列，以查看它是否编译并收到另一个错误：

\n

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

\n

正如我所说，这与我的 scss 文件无关，而且我的自定义 webpack 出了问题，因为当我删除 webpack 规则时，我的项目编译成功。

\n