3

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 配置问题但我找不到它。这是我的自定义 webpack js 文件

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]
              },
            }
          },
        ],
      },
    ],
  },
};

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

./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)

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

./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)

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

4

0 回答 0