我是一名新手开发人员，正在研究一个应用程序，我有点困惑，但想了解一些 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 构建。