postcss 和 simple-vars - 使用对象内部的变量

Question

TL;DR: 如果我有这样的对象并使用 postcss-simple-vars:

default: {
  white: '#ffffff'
}

如何在 css 中使用 $white 变量？

长版：

我有两个项目，一个包含我所有的 React 组件，另一个是使用这些组件的应用程序。（注意：下面的代码是一个精简版，而不是完整的代码，与此无关）我有一个这样导出的主题：

const theme = {
  ...some other stuff, not relevant to this question,
  variables: {
    colors: {
      white: '#ffffff',
      black: '#000000',
      ...
    }
  }
}
export default theme;

在我的应用程序项目中，我将其作为导入主题从 '../node_modules/components/theme.js' 导入；如果我登录主题，一切都是正确的。

现在，在 postcss.config.js 文件中，我使用它来定义 postcss-simple-vars 应该从哪里获取变量：

'postcss-simple-vars': {
  variables: require('./node_modules/components/theme.js'),
  onVariables: (variables) => {console.log(variables}
},

onVariables 方法中的控制台日志以这种格式打印出我的所有变量：

default: {
 colors: {
   white: '#ffffff',
   black: '#000000'
 }
}

所以在我的 css 中，我尝试以多种方式使用它们：

html, body {
 background-color: $white;
 background-color: $default.colors.white;
 background-color: $default['colors']['white'];
}

但以上方法均无效（它主要呈现为 background-color: [object,object];

在这种情况下如何使用变量？有可能吗？

感谢任何意见和建议

Answer 1

最后，我决定创建一个将所有嵌套属性移动到根目录中的函数，现在一切似乎都运行良好。

postcss 和 simple-vars - 使用对象内部的变量

postcss and simple-vars - use variables that are inside an object

javascript

postcss