Используйте Postcss в пользовательской библиотеке Angular

Я использовал postcss, postcss-css-modules и posthtml-css-modules для реализации модулей CSS в приложении Angular. Я также использовал @ angular-builders / custom-webpack для этого.

Теперь я хочу сделать то же самое с моей пользовательской библиотекой Angular. Однако я не могу использовать @angular -builders / custom-webpack, потому что библиотеки Angular создаются с использованием ng-packagr.

Итак, @ angular-builders / custom-webpack недоступен для использования: https://github.com/just-jeb/angular-builders/issues/356

С другой стороны, ng-packagr не поддерживает postcss: https://github.com/ng-packagr/ng-packagr/issues/1471

Я читал, что можно расширить конфигурацию rollup (это компилятор, использующий ng-packagr в конце сборки) в ng-packagr:

https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

Но я не нашел никакой документации для этого.

Кто-нибудь знает, как это сделать?

Другое решение, которое я подумал, это сделать все стили глобальными и скомпилировать их с помощью scss-bundle и postcss. как я сделал здесь: NodeJs Скрипт, компилирующий файлы scss, не работает из-за правила postcss для неопределенных переменных

И после того, как я смогу использовать lodash, я смогу заменить имена классов их хешированными именами классов, например предлагается здесь: Используйте [hash: base64: 5] в файле JavaScript / TypeScript

Но для этого мне нужно знать, как вызывать lodash в сборке ng-packagr .

Кто-нибудь знает, как это сделать?

Любое другое решение более чем приветствуется.

Заранее спасибо.


person German Quinteros    schedule 30.03.2020    source источник
comment
ng-packagr уже использует postcss. github.com/ng- packagr / ng-packagr / blob / master / src / lib / styles /. Чего вы хотите достичь?   -  person Gourav Garg    schedule 04.04.2020
comment
Привет @GouravGarg, Спасибо за ответ. Я хочу использовать postcss-css-modules и posthtml-css-modules в сборке моей библиотеки Angular. Вы знаете, возможно ли это?   -  person German Quinteros    schedule 05.04.2020
comment
Я смог использовать postcss-css-modules и posthtml-css-modules в проекте Angular, и это стало возможным благодаря @ angular-builders / custom-webpack. Однако я не могу использовать @ angular-builders / custom-webpack в сборке библиотеки Angular, из-за этого я не знаю, как использовать postcss-css-modules и posthtml-css-modules в сборке Custom Angular. Библиотека.   -  person German Quinteros    schedule 05.04.2020
comment
Может быть, это немного поможет вам github.com/ng-packagr/ng- packagr / issues / 643   -  person Gourav Garg    schedule 05.04.2020
comment
Да, это хорошая помощь. Вроде еще ветка не объединена. Есть еще одна идея? Или можно ли использовать ту версию, которая еще не была слита? Заранее спасибо.   -  person German Quinteros    schedule 06.04.2020
comment
до тех пор вы можете предварительно обработать эти стили с помощью postcss, а затем передать их в свою библиотеку. Это может вам немного помочь medium.com/@ Dor3nz /   -  person Gourav Garg    schedule 06.04.2020
comment
Да, это полезно. Но мне также нужно внести некоторые изменения в html компонентов. Я могу использовать для этого lodash, проблема в том, что я не знаю как, потому что HTML внедряется после сборки. Вы знаете, как этого добиться? Существует ли какой-нибудь компилятор вроде scss-bundle для html? Заранее спасибо.   -  person German Quinteros    schedule 06.04.2020
comment
вы можете справиться с этим в процессе пост-сборки   -  person Gourav Garg    schedule 06.04.2020
comment
Можно ли изменить HTML, встроенный в файлы bundles / dist? Как я могу это сделать?   -  person German Quinteros    schedule 06.04.2020
comment
легко переименовывать файлы и делать простые вещи. сложность зависит от того, чего вы хотите достичь. Кроме того, вы говорите, что HTML внедряется после сборки.   -  person Gourav Garg    schedule 06.04.2020
comment
В моем случае я хочу взять все имена классов в файлах HTML и изменить имя класса на значение в файле json. Пример, до изменения: <div class="container"> после изменения <div class="_.asdasd"> значение "_.asdasd" будет в файле json, например: { "container" : "_.asdasd" }   -  person German Quinteros    schedule 06.04.2020
comment
Есть несколько инструментов веб-пакета, которые вы можете использовать после этого stackoverflow.com/questions/45644590/ npmjs.com/package/replace-in-file-webpack-plugin   -  person Gourav Garg    schedule 06.04.2020
comment
Однако замечательно, что эти инструменты можно использовать с веб-пакетом. Я не использую webpack в качестве компилятора. Могу ли я использовать их как скрипт js или typescprit после сборки?   -  person German Quinteros    schedule 06.04.2020
comment
Давайте продолжим это обсуждение в чате.   -  person Gourav Garg    schedule 06.04.2020
comment
это работает что ли?   -  person Gourav Garg    schedule 07.04.2020


Ответы (1)


Это усовершенствование уже обсуждается. Возможно, изменения все еще продолжаются. Вы можете отслеживать с здесь

Вы можете предварительно обработать свои стили, а затем перейти к ng-packagr, как предлагается в этом статья

Другая проблема для встраивания файлов HTML, вы можете использовать для создания процесса пост-сборки, например this с помощью этих инструменты

Надеюсь, это решит вашу проблему.

person Gourav Garg    schedule 07.04.2020
comment
Спасибо за Ваш ответ. Проблема здесь в том, что github.com/css-modules/ выполняется во время сборки. После того, как ng-packagr построит библиотеку Angular, все шаблоны (HTML) будут встроены, и мне нужно изменить эти шаблоны. У вас есть идея изменить шаблоны во время сборки или после нее? - person German Quinteros; 07.04.2020
comment
Если эта проблема существует во всех приложениях, и эти переменные одинаковы для всех приложений. Вы можете постоянно обновлять HTML-файлы, если вам это удобно. - person Gourav Garg; 08.04.2020
comment
Это не подходящее решение, потому что, если я это сделаю, я заменю исходные имена классов их хешированными именами классов, и мне нужно сохранить исходные имена классов. Я хотел бы заменить имена классов их хешированными именами классов во время сборки или после в файлах dist. У вас есть идея / решение для этого случая? - person German Quinteros; 08.04.2020