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;
}

在我通过next build && next导出构建了我的项目之后，颜色没有正确地显示出来。例如，color: var(--blueGray)，而不是color：#8d96b2。有人知道怎么回事吗？

​

​

Answer 1

我认为您应该将CSS变量直接导入到样式部分，而不是在配置部分。但我可能搞错你了

Answer 2

全局CSS需要包含在/pages/_app文件中。

来自添加全局样式表文档：

若要向应用程序添加(全局)样式表，请在pages/_app.js中导入CSS文件。 (...)在开发中，用这种方式表示样式表允许在编辑样式时重新加载样式--这意味着您可以保持应用程序状态。 在生产中，所有CSS文件将自动连接到一个缩小的.css文件中。

确保导入自定义_app中定义CSS变量的文件。

import '../styles/globals.css'
import '../styles/variables.css'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

export default MyApp;

Answer 3

这可能不值得赏金，但来自NextJS文档。

不编译CSS变量是因为不可能安全地这样做。如果必须使用变量，请考虑使用由Sass编译的Sass变量。

​

​