Угловой погрузчик CLI 6 Custom Webpack SCSS - PullRequest
Новая
       43

Угловой погрузчик CLI 6 Custom Webpack SCSS

0 голосов
/ 21 сентября 2018

Я пытаюсь написать собственный модуль веб-пакета, чтобы переопределить или расширить текущую сборку SCSS в angular 6 с помощью cli 6, чтобы иметь возможность передать «бренд» и сопоставить его с любыми переопределениями, например «somemodule /'brand' / 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-1oc4 https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object https://github.com/webpack-contrib/sass-loader/blob/master/test/bootstrapSass/webpack.config.js https://github.com/webpack-contrib/sass-loader/issues/536 https://github.com/meltedspark/angular-builders

1 Ответ

0 голосов
/ 28 мая 2019

У меня была та же проблема, я пробовал 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;
};
...