我有一系列定义黑暗模式主题的变量。 在本地运行应用程序时,这些变量会完美加载。
这是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',
],
};
有什么想法吗?谢谢!
答案 0 :(得分:0)
我不知道 zeit,但是在开发和生产版本中都可以从 .module.css
文件非常容易地访问全局 css 中声明的变量。