У меня есть проект с использованием веб-пакета, который использует загрузчик PostCSS и разделение кода. CSS для модулей импортируется непосредственно в точки входа, как показано ниже, с помощью загрузчика SASS.
import '@/css/modules/components/_accordion.scss'
Некоторые модули используют пользовательские свойства CSS, которые объявлены в отдельном модуле, импортированном выше в той же точке входа.
import '@/js/modules/common'
Это работает нормально, однако, только пользовательские свойства, используемые в общем модуле, преобразуются в шестнадцатеричные значения в скомпилированном CSS, как и ожидалось загрузчиком PostCSS, а не те, которые используются в каждом другом модуле SASS, впоследствии импортированном в точку входа, например. _accordion.scss.
В качестве обходного пути, для их преобразования я сейчас импортирую файл, содержащий пользовательские свойства в верхней части каждого модуля SASS.
@import "css/tools/variables/colors";
Однако это означает, что объявления пользовательских свойств дублируются в нескольких файлах CSS (чанках).
Мне бы хотелось, чтобы решение не дублировало объявления в скомпилированном CSS, и при этом обеспечивало бы преобразование всех пользовательских свойств в соответствии с ожиданиями PostCSS.