Angular CLI 6 Пользовательский загрузчик SCSS Webpack
Я пытаюсь написать собственный модуль webpack, чтобы переопределить или расширить текущую сборку SCSS в angular 6 с помощью cli 6, с намерением передать «бренд» и сопоставить его с любыми переопределениями, например, «somemodule /« бренд » /filename.override.scss "и замените файл в родительской папке" somemodule / filename.scss ", но я не продвигаюсь.
Настраивать: @ angular / cli ":" 6.2.2 ", с @ angular-builders / custom-webpack ":" ^ 2.4.1 "
Я обновил сборку своих проектов, чтобы отразить, что я использую собственный веб-пакет, и расположение переопределения / расширения
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
Мой extra-webpack.config.js выглядит так, просто базовый стиль hello world, который я видел на многих сайтах
module.exports = {
module:{
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["src"]
}
}]
}]
}
};
однако запустить мою сборку с этим
ng run websitename:build
выдает эту ошибку
Module build failed (from ./node_modules/sass-
loader / lib / loader.js):
^
Invalid CSS after "": expected 1 selector or at-
rule, was "var content = requi"
Насколько я понимаю, это может быть вызвано попыткой переопределения правила scss, однако я не вижу других ссылок на это правило для удаления. Я также попытался несколько методов полностью переопределить старое правило, но безуспешно.
Решения и руководства, на которых я был в основном сосредоточен https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3ahttps://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-objecthttps://github.com/webpack-contrib/sass-loader/blob/master/test/bootstrapSass/webpack.config.jshttps://github.com/webpack-contrib/sass-loader/issues/536https://github.com/meltedspark/angular-builders
Мне не удалось решить эту проблему, к сожалению, я создал отдельные проекты для каждого бренда в рамках одного проекта.
Для некоторых rason в документе npmjs.com/package/@angular-builders/… я могу прочитать mergeStrategies: стратегии слияния конфигурации webpack, можно добавить | добавить | заменить на запись конфигурации webpack. По умолчанию добавляется. Возможно, мы можем попробовать получить исходную конфигурацию веб-пакета и изменить, чтобы загрузить горячий css
Каковы ваши намерения при создании загрузчика SCSS? Вы, Только, хотите заменить файл SCSS другим файлом SCSS, который содержит определенный CSS для этой марки? Если так, я могу знать решение.
Эй, это кому-нибудь повезло?
Ответы 1
У меня была та же проблема, я попробовал mergeStrategies, но не сработало. Я изменил свой собственный веб-пакет на функцию, которая решила проблему, я смог расширить параметры sass.
module.exports = function(config) {
const rules = config.module.rules || [];
rules.forEach(rule => {
if (String(rule.test) === String(/\.scss$|\.sass$/)) {
const loaders = rule.use;
const transformedLoaders = loaders.map(l => {
if (l.loader === 'sass-loader') {
// here you can override options or replace or add.
}
return l;
});
rule.use = transformedLoaders;
}
});
return config;
};
У меня такие же проблемы, решения не нашел