Как добавить дополнительный плагин postcss через новый @ angular / cli v7 angular.json или custom-webpack.config.js? - PullRequest
Новая
       32

Как добавить дополнительный плагин postcss через новый @ angular / cli v7 angular.json или custom-webpack.config.js?

0 голосов
/ 28 декабря 2018

@ angular / cli @ 7 + позволяет указать customWebpackConfig для обеспечения пользовательской конфигурации веб-пакета, например: 

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./build/custom-webpack.config.js",
          "mergeStrategies": {
            "externals": "prepend"
          }
        },
        ...

Этот файл технически позволяет вам добавлять, добавлять или заменять любую частьконфигурации веб-пакета.До обновления до @angular@7.1.3 и @angular/cli@7.1.3 мы выбросили конфигурацию веб-пакета, чтобы внести некоторые дополнения.Одним из таких дополнений был плагин postcss-momentum-scrolling postcss-loader, который автоматически включал прокрутку импульса iOS во всех прокручиваемых контейнерах.

Я ищу поддержку в выяснении того, как сгенерировать необходимый пользовательский код веб-пакета для загрузки этого плагина черезподдерживаемые настройки, разрешенные @angular/cli@7+.

Вот пример того, что я попробовал в моем файле custom-webpack.config.js: 

const postcssMomentumScrolling = require('postcss-momentum-scrolling');

module.exports = {
  module: {
      rules: [
          {
              test: /\.scss$|\.sass$/,
              use: [
                  {
                      "loader": "postcss-loader",
                      "options": {
                          "plugins": [
                            postcssMomentumScrolling(),
                          ]
                      }
                  }
              ]
          },
      ],
  },
};

Как только я коснусь фрагмента scss в веб-пакетеКонфигурация, кажется, делает замену вместо слияния или добавления, ломая сборку.

Мне интересно, есть ли у кого-нибудь руководство или предложения о том, как узнать, какая начальная конфигурация веб-пакета, которую @angular/cli создает,является отправной точкой для изменений и способом предварительного просмотра / просмотра кода, который будет выполнен как отладка.

Кроме того, пример подобной настройки будет отличным.

Спасибо!

1 Ответ

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

Я думаю, вам нужно указать "customWebpackConfig", какую часть объединить.Примерно так: 

"mergeStrategies": {
    "module.rules": "prepend"
}

Таким образом, вы скажете объединиться со стратегией prepend.В соответствии с документацией «custom-webpack», по умолчанию следует добавить «append», что не выглядит в вашем примере.

Прошло много времени с того момента, как вы задали вопрос, но я хотел спроситьВы смогли это исправить, так как я работаю над некоторыми проблемами при слиянии моего "module.rules" ... Кажется, это работает, только если я установил стратегию "замены".

...