#webpack #postcss #postcss-loader #postcss-color-mod-function #postcss-custom-properties
#веб-пакет #postcss #postcss-погрузчик #postcss-цвет-мод-функция #postcss-пользовательские свойства
Вопрос:
Рассмотрим этот упрощенный пример веб-пакета
webpack.config.js
module.exports = (env, options) =gt; { return { module : { rules : [ { test : /.css$/, use : [ { loader : 'postcss-loader' }, ], }, ], }, plugins : [ ] }; }; postcss.config.js
module.exports = (api) =gt; { return { plugins : [ ['postcss-custom-properties'], ['postcss-color-mod-function'], ], } }; файл.css
:root { --myvar: color-mod(#1BB749 w( 10%) s( 1%)); } .test1 { color: color-mod(#1BB749 w( 10%) s( 1%)); } .test2 { color: var(--myvar); } Выход есть
.test1 { color: hsl(137.69230769230768, 56.4140127389%, 46.1764705882%); } .test2 { color: color-mod(#1BB749 w( 10%) s( 1%)); } Почему color-mod() in .test2 не обрабатывается? У меня есть правильный порядок плагинов, в котором postcss-пользовательские свойства, во-первых, обрабатывают переменную, а во-вторых, функция postcss-color-mod должна обрабатывать color-mod (), но она не обрабатывается.
Решение заключается только в использовании функции postcss-color-mod в разделе плагинов webpack, а не в разделе module.rules, но это негативно влияет на производительность при обработке всего пакета с функцией postcss-color-mod во время просмотра или разработки сервера с горячей перезагрузкой. Поэтому я хотел бы, чтобы это работало в разделе module.rules, как и ожидалось. Спасибо.