Блог

Я начинающий разработчик, смотрящий на приложение, и я немного озадачен, но хочу понять, как работает некоторый css. Я кое-что прочитал и исследовал, но мои знания о том, как он построен, ограничены:

1 — Приложение содержит файл, например style1.js в котором есть некоторый код, такой как

 module.exports = {  primary: 'red' }  

2 — Затем существует другой файл стиля для компонента, например, header.css, который имеет

 .header {  color: var(--primary); }  

Проведя некоторые исследования, я узнал, что здесь используется инструмент под названием Postcss, который позволяет заменить основную переменную значением из файла js. Однако я не вижу файла style1.js импортируется либо в компонент, либо в этот файл стиля, поэтому не уверен, как он получает доступ к «основной» переменной.

3 — Когда приложение построено и запущено, и я проверяю исходный код, я вижу несколько стилей для страницы, и когда я проверяю bundle.js файл, который я вижу в различных разделах, все остальные стили здесь, они изложены таким образом:

 eval("module.exports = ....lots of other code and styles  primary: 'red' );  

Я хотел бы знать, как эти стили могут оказаться здесь таким образом, а затем как они применяются к элементам на странице, поскольку их нет в таблице стилей или в тегах стилей в верхней части страницы, что, как я знаю, может сделать Webpack.

Любая информация, которая поможет соединить точки здесь, была бы отличной. Приложение создается с помощью Webpack.