Nextjs/postcss css变量在生产中不可用(Zeit)

Question

我有一系列定义暗模式主题的变量。当在本地运行应用程序时，这些变量完全加载。

这是css检查器：

dark-mode {
  --color-bg-bg: #100818;
  --color-bg-primary: #100818;
  --color-bg-secondary: #1e1528;
  --color-bg-almost-primary: rgba(15,8,24,0.8);
  --color-bg-light: #0e0917;
}

但是，如果我为生产环境构建应用程序，或者在Zeist中部署它，那么这些变量是不可用的。

我以为启用custom-properties功能可以解决这个问题，但事实并非如此。下面是我的postcss配置文件：

module.exports = {
  plugins: [
    'tailwindcss',
    process.env.NODE_ENV === 'production'
      ? [
        '@fullhuman/postcss-purgecss',
        {
          content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}',
          ],
          defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
          features: {
            'custom-properties': true,
          },
        },
      ]
      : undefined,
    'postcss-preset-env',
  ],
};

有什么想法吗？谢谢!

Answer 1

我不知道zeit，但是在全局css中声明的变量在开发和生产版本的.module.css文件中都非常容易访问。