Я пытаюсь применить концепцию модулей CSS к моему угловому приложению, чтобы заказать встраивание его в существующий интерфейс с помощью CSS, который, к сожалению, перекрывается. В моем проекте используется scss, я хочу, чтобы webpack «модулировал» мой CSS после CSS, если он был сформирован из scss на последнем этапе сборки, я думаю.
Я хочу использовать CSS-загрузчик webpack для этого.
Но я не мог заставить его работать.
https://www.npmjs.com/package/@angular-builders/custom-webpack, чтобы настроить мою конфигурацию webpack. Я пробовал применить следующую конфигурацию
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
};
и получил эту ошибку
ERROR in Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../../../css-loader/dist/runtime/api.js")(false);
Я пытался найти и добавить загрузчик css в существующие
module.exports = (config, options) => {
const rules = config.module.rules || [];
rules.forEach(rule => {
if (String(rule.test) === String(/\.css$/)) {
rule.use.push({ loader: 'css-loader', options: { modules: true }})
}
});
return config;
};
Получение такой же ошибки. Как заставить работать?
Обновление 1:
Я обнаружил, что angular использует postcss, который также предоставляет эту функциональность в виде плагина postcss-modules. Также все еще не могу заставить его работать.
