Как исправить ошибку «Неизвестное слово» при объединении CSS-файла в веб-пакет ⇐ CSS

[Anonymous]

Я создаю приложение Electron на Angular и обновляю пару зависимостей до последних версий.

• Electron остается на версии 19
• Tailwindcss v3.1.8
• Angular v11 до v14
• Веб-пакет от v4.46.0 до v5.74.0

Весь проект ранее успешно компилировался.
Я использую редактор monaco, и после того, как я столкнулся с приведенными выше описаниями, я столкнулся с проблемой на этапе объединения веб-пакета.

Код: Выделить всё

HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /.../projects/foo/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

1 |
> 2 |       import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
|       ^
3 |       import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
4 |       import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";

До обновления версий webpack.config.json содержал только правило для /\.scss$/! Но внезапно с webpack v5 произошел сбой, поскольку он не может понять некоторые файлы CSS (известная ошибка: вам может понадобиться соответствующий загрузчик для обработки этого типа файлов).
Я предположил, что правило для CSS отсутствует. Я добавил правило, и мой файл веб-пакета теперь выглядит так:

Код: Выделить всё

{
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
"postcss-loader"
],
},
{
test: /\.scss$/,
use: [
'postcss-loader',
{
loader: 'sass-loader',
options: {
implementation: sassImplementation,
},
},
],
},
],
},
}

Обратите внимание на порядок «style-loader», «css-loader», «postcss-loader», который указан как исправьте один в сообщениях типа здесь и здесь. Я по-прежнему получаю указанную выше ошибку.
Может ли кто-нибудь указать, неправильно ли настроен мой веб-пакет или я пропустил какое-то правило?

Подробнее здесь: https://stackoverflow.com/questions/736 ... in-webpack