如何在Angular CLI项目中正确配置使用Bootstrap 5 RTL？

错误根源 #

• loader执行顺序错误：webpack中use数组的loader执行顺序为从后往前，你当前配置的sass-loader在前、postcss-loader在后，会导致未编译的SCSS源码先被postcss处理，rtlcss仅支持解析标准CSS语法，处理原生SCSS语法时就会出现第一个unicode解析报错。
• 重复覆盖SCSS处理规则：Angular内置webpack配置已经包含SCSS编译、资源路径解析、autoprefixer注入等逻辑，你新增的独立SCSS规则覆盖了内置逻辑，缺失了资源处理相关配置，导致第二个图片资源无法解析的报错。

最优解决方案（无需修改webpack配置） #

Angular原生支持读取项目根目录的postcss配置，不需要注入自定义webpack规则，即可实现rtlcss注入，不会破坏原有编译逻辑：

1. 项目根目录新建postcss.config.js，写入以下内容：

module.exports = {
  plugins: [
    require('rtlcss')
  ]
}

2. 确认angular.json中build配置下的inlineStyleLanguage设置为scss，且styles数组中已经正确引入Bootstrap 5的SCSS入口，或在styles.scss中手动引入：

@import "~bootstrap/scss/bootstrap";

3. 在index.html的<html>标签上添加RTL标识：

<html dir="rtl" lang="ar">
<!-- lang属性替换为你实际使用的RTL语言编码 -->

完成后直接执行ng serve或ng build即可正常编译生效。

自定义webpack配置修正方案 #

如果你必须使用自定义webpack插件注入规则，不要新增独立的SCSS处理规则，而是修改Angular内置的现有规则，避免覆盖原有配置：

1. 将你的自定义webpack配置文件修改为以下内容：

const rtlcss = require('rtlcss');

module.exports = (config) => {
  // 查找Angular内置的SCSS处理规则
  const scssRule = config.module.rules.find(rule => rule.test.toString().includes('s[ac]ss'));
  // 查找内置规则中的postcss-loader配置
  const postcssLoader = scssRule.use.find(item => item.loader.includes('postcss-loader'));
  // 将rtlcss注入到postcss插件列表末尾
  postcssLoader.options.postcssOptions.plugins.push(rtlcss);
  return config;
};

2. 保持ngx-build-plus或custom-webpack的原有调用配置不变即可。

注意事项 #

• 不需要手动引入autoprefixer，Angular会根据项目根目录的browserslist配置自动注入，重复引入可能导致版本冲突。
• 如果需要动态切换LTR/RTL模式，不要全局注入rtlcss，可单独构建两个版本的样式包，运行时根据语言动态加载。
• Bootstrap 5原生适配rtlcss处理，不需要修改Bootstrap源码即可实现样式自动翻转。

内容的提问来源于stack exchange，提问作者Daniel.V