如何使用 nextJs 在 CSS 中使用环境变量来指定基色？

Question

如何使用环境变量来指定 CSS 中的基色？

我使用NEXTJS

我的颜色全部定义为我的 globals.css 中的变量：

@layer base {
   :root {
      ...
      --primary: #0096d0;
      --primary-bright: hsl(from var(--primary) h s calc(l*1.5));
      ...

我试过了

--主要：env(NEXT_PUBLIC_PRIMARY_COLOR，#0096d0);

但是 env 变量被忽略了

有什么想法吗？

Answer 1

虽然

env()

确实可以使用自定义属性，但它会读取用户代理环境变量，据我所知，您还无法为其定义自定义环境变量。因此，您需要考虑使用 CSS 预处理器、JSX 中的内联样式或 PostCSS。

内联样式

显然，主要缺点是它不能像您一样在 global.css 中使用。但是，虽然以下示例具有硬编码样式，但您可以动态创建

style

对象。

在

index.js

：

//this can be created dynamically by looping over keys in .env.local
const style = {"--primary": process.env.NEXT_PUBLIC_PRIMARY_COLOR}
<div style={style }>
    <MyRoot></MyRoot>
</div>

CSS 预处理器

由于您使用的是 Next.js，因此您可以在 next.config.js 中轻松设置 SCSS。以下是将特定环境变量导入 scss 变量的示例设置。

按照下一个文档Styling with SCSS安装SASS。

npm install --save-dev sass

在

next.config.js

中，添加 SASS 变量：

const nextConfig = {
  sassOptions: {
    additionalData: Object.keys(process.env).reduce((accumulator, currentValue) => {
      if (currentValue.startsWith('NEXT_THEME_')) {
        return `${accumulator}$${currentValue}: ${process.env[currentValue]};\n`
      }
      else {
        return accumulator
      }
    }, ''),
    includePaths: [path.join(__dirname, 'styles')],
  }
}

在

.env.local

：

NEXT_THEME_PRIMARY_COLOR=red

然后您可以通过以下方式使用

globals.scss

中的环境变量：

@layer base {
  :root {
    --primary: #{$NEXT_PUBLIC_PRIMARY_COLOR};
  }
}

PostCSS

免责声明：我从未尝试过此方法，并且它可能会发生变化，因为自定义环境变量可能会在 css env 规范中更新。

由于您使用的是 Nextjs，PostCSS 已经内置了。有一个 PostCSS 环境变量 插件，可以按照当前规范实现

env()

。