Next.js 生产构建不应用 css 变量答案

【问题标题】：Next.js production build doesn't apply css variablesNext.js 生产构建不应用 css 变量
【发布时间】：2022-02-20 01:06:51
【问题描述】：

我有下一个 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 export 构建项目后，颜色显示不正确。例如，颜色：var(--blueGray)，而不是颜色：#8d96b2。有人知道出了什么问题吗？

【问题讨论】：

您能否分享一个定义颜色属性的示例、它的用法、它的外观以及当前的外观？
所以 PostCSS 正在从自定义属性中删除 --？
是的，我添加了照片。它看起来像照片，但应该是颜色：#8d96b2，而不是颜色：var(--blueGray)
那个输出是正确的。 CSS 颜色应该是 --blueGray。如果您将鼠标悬停在它上面，它应该会告诉您浏览器说该属性当前是什么。请记住，它们不像 SASS 变量，它们是运行时，而不是编译时。
但是如果我运行开发服务器，颜色是#8d96b2 并正确显示

标签： javascript reactjs next.js postcss

【解决方案1】：

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

【讨论】：

问题是如果我使用开发模式，一切正常，没有直接导入。但在生产构建中不起作用

【解决方案2】：

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

来自Adding a Global Stylesheet 文档：

要将（全局）样式表添加到您的应用程序，请在其中导入 CSS 文件 pages/_app.js.

(...) 在开发中，以这种方式表达样式表可以让您的样式会在您编辑它们时热重新加载——这意味着您可以保留应用状态。

在生产中，所有的 CSS 文件都会自动连接成一个单个缩小的.css 文件。

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

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

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

export default MyApp;

【讨论】：

感谢您的建议。我将 _app.js 更改为 ``` import '../styles/globals.css' import '../styles/vars.css' ``` 但它不会改变渲染和在 dev 中运行之间的奇怪差异模式和构建/导出。
@hallvors 请注意，在您的存储库中，CSS 变量位于根目录中的 vars.css 文件中（而不是在 styles 文件夹中） - 您需要根据您的情况导入它。

【解决方案3】：

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

CSS 变量没有被编译，因为它不可能安全地编译所以。如果必须使用变量，请考虑使用 Sass 之类的东西 Sass 编译掉的变量。

【讨论】：

是的，但这是否应该被解释为“下一个构建过程将不使用 postcss-custom-properties”？我的解释是，就好像一个人只是使用 CSS 变量创建了一个 Next.js 网站并在没有任何措施的情况下构建它，它们的输出将保持不变。我期待使用 postcss-custom-properties 设置一个 postcss 配置来更改它，并且在运行 next dev 时它似乎以这种方式工作 :)