javascript - 使用 Webpack 创建 CSS 变量

Question

我目前有一个global.js如下所示的配置文件：

module.exports = {
  siteBackgroundColor: "#000",
  siteThemeColor: "#d4d1cb",
}

有没有办法在 GatsbyJS 中使用 Webpack 将这些变量转换为 CSS 变量，以便在构建时我的变量会像这样应用？

:root {
  --site-background-color: "#000";
  --site-theme-color: "#d4d1cb";
}

我认为 postcss 变量做了类似的事情：

postcss([
  cssvariables({
    variables: {
      "--some-var": "100px",
      "--other-var": {
        value: "#00ff00"
      },
      "--important-var": {
        value: "#ff0000",
        isImportant: true
      }
    }
  })
]).process(css, opts);