如何解决“您好，时间旅行者。我们正处于无前缀 CSS 的黄金时代，您的样式表不再需要 Autoprefixer。”？

Posted 2023-03-06

【中文标题】如何解决“您好，时间旅行者。我们正处于无前缀 CSS 的黄金时代，您的样式表不再需要 Autoprefixer。”？

【英文标题】：How do I solve "Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet."?

【发布时间】：2020-11-03 02:02:12

【问题描述】：

在我的 Next.JS 应用程序中，我将样式表导入 _app.js，如下所示：

import '../public/css/Index.css';

Index.css 包含以下内容：

.index-container 
    margin: 20px auto 0;

如何解决错误信息：

./src/public/css/Index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./src/public/ css/索引.css) 警告

你好，时间旅行者。我们正处于无前缀的黄金时代 CSS，您的样式表不再需要 Autoprefixer。

【参考方案1】：

这是由于browserslist 与postcss-preset-env 与v9.4.4 的捆绑版本之间的一些不兼容而导致的问题。

更新到v9.5.0 应该可以解决它。

【参考方案2】：

您的问题可以通过应用以下代码解决package.json：

 "browserslist": 
    "production": [
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ]
  

完成这些更改后，重新启动服务器。您将不会再收到此警告。

【讨论】：

解释为什么这会解决问题会有所帮助。 :)

【参考方案3】：

我必须按如下方式更改生产和开发项目，这很有效。

"browserslist": 
  "production": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ],
"development": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ]
,

【参考方案4】：

更新所有已安装的软件包解决了这个问题。