Next.js 生产版本不应用 css 变量

Question

我有下一个 postcss 配置

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        browsers: 'last 2 versions, IE 11, not dead',
        preserve: false,
        features: {
          'custom-media-queries': true,
          'custom-properties': true,
          'nesting-rules': true
        },
        importFrom: ['src/styles/variables.css']
      }
    ]
  ]
}

这个文件带有 css 变量

@custom-media --desktop screen and (min-width: 768px);
@custom-media --mobile screen and (max-width: 767px);

:root {
  --montserrat: montserrat, sans-serif;
  --sfProDisplay: sf pro display, sans-serif;
  --helvetica: helvetica, sans-serif;
  --blue: #315efb;
  --middleBlue: #2c54e2;
  --darkBlue: #274bc8;
  --lightBlue: #e0ebff;
  --green: #21a038;
  --grey: #62687f;
  --darkGray: #343b4c;
  --blueGray: #8d96b2;
  --cloudGray: #f3f4f7;
  --cloudGray7: #afb6c9;
  --darkCarbone: #1f2431;
  --paleYellow: #fffde5;
  --red: #ff564e;
}

在我通过下一个构建&&下一个导出构建项目后，颜色未正确显示。例如，颜色：var(--blueGray)，而不是颜色：#8d96b2。有人知道出了什么问题吗？

Answer 1

我相信你应该直接在样式部分导入 CSS 变量，而不是在配置中。但我可能误解了你的意思