Доступ к сгенерированному CSS в плагине webpack с помощью style-loader

Я написал плагин webpack, который читает меньше исходных файлов, а затем после обработки генерирует короткий CSS, который позволяет переопределить стили, специфичные для цвета, в браузере с помощью less.modifyVars(). Вот демо https://antd-live-theme.firebaseapp.com/

Но проблема в том, что он не работает с css-модулями, поскольку имена классов, сгенерированные после компиляции, будут отличаться от тех, что находятся в этих файлах. Поэтому я думаю, что лучше обработать сгенерированный css с помощью webpack (css, less, style loaders) в моем плагине webpack. так что вопрос

How to get that generated css in webpack plugin even in dev mode using where style-loader is being used?

Вот плагин https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/index.js

Любые идеи по выполнению этой задачи приветствуются. Сообщите мне, если что-то непонятно.

Заранее спасибо :)

Не могли бы вы предоставить минимальный код, с которым я могу поиграть, чтобы помочь?

BENARD Patrick 21.08.2018 20:30

@pbenard Я создам репо с образцом кода и помечу вас

Zohaib Ijaz 22.08.2018 21:05

вы можете поделиться своей конфигурацией веб-пакета?

Sakhi Mansoor 24.08.2018 14:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
147
1

Ответы 1

Если я правильно понял, вам нужно извлечь имена классов css, которые будут использоваться в вашем плагине.

Хотя не рекомендуется запускать это в конфигурации внешнего веб-пакета, вы можете попробовать взломать свой путь с помощью babel-plugin-css-modules-transform (который основан на css-modules-require-hook).

Это предназначено для рендеринга модулей css на сервере.

Другие вопросы по теме