未使用 Postcss 却收到警告信息。

Question

我收到了这个 Postcss 的警告：

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)

但我没有在使用它。这非常烦人，因为你可以看到，该消息重复多次。

我知道我为什么会出现这个错误（我没有设置 Postcss 配置文件或任何插件、字符串化器等），但我不知道为什么 Postcss 会被安装在第一位。

这是我的 package.json 文件

{
  "name": "vip-english-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "engines": {
    "node": "16.x"
  },
  "dependencies": {
    "@dzangolab/vue-accordion": "^1.2.0",
    "@nuxtjs/axios": "^5.13.6",
    "express": "^4.17.1",
    "googleapis": "^91.0.0",
    "vue-carousel": "^0.18.0",
    "vue-check-view": "^0.3.0",
    "vue-gapi": "^2.0.0",
    "vue-js-modal": "^2.0.1",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.3.0",
    "core-js": "^3.19.1",
    "nuxt": "^2.15.8",
    "nuxt-windicss": "^2.0.12"
  }
}

有人有什么想法吗？

- Vencho

---

逐个删除库文件并找出是哪一个导致了这个问题。 - Robert

Answer 1

我已经花了3天时间解决这个错误，最终在Github的讨论中找到了解决方案。

我正在使用以下依赖项。

"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",

Github问题 - 允许禁用“您没有设置任何插件、解析器或字符串化器。目前，PostCSS什么也不做。在https://www.postcss.parts/上选择适合您情况的插件，并在postcss.config.js中使用它们

在nuxt.config.js文件的构建选项下添加以下内容，如下所示。这对我有用。

build: {
postcss: null,
}

希望这有所帮助。

- Tyler

---

这将禁用任何后处理（即默认的nuxt postcss包括autoprefixer）。 - venimus

这是唯一一个对我有效的解决方案。但我想要使用autoprefixer。有什么解决方案可以让我传递一些选项给autoprefixer以消除那个警告吗？ - Merc

Answer 2

只需在nuxt.config.js中添加即可

build: {
 postcss: null,
 loaders: {
   vue: {
     prettify: false
   }
  }
}

- amin aligholi

---

应该使用 postcss: false 而不是 null - Cliff Helsel

Answer 3

PostCSS是Nuxt的一个依赖。在你的项目目录中，可以使用npm ls {package_name}命令查看包依赖树。
最近的PostCSS版本已解决该问题：https://github.com/postcss/postcss/issues/1375，但Nuxt可能只会在下一个大版本（v3）更新。

- joshas

Answer 4

我正在使用nuxt 2.15.8，并遇到了同样的问题。

以下命令和配置将抑制警告。

npm i -D @nuxt/postcss8 @nuxtjs/style-resources

在nuxt.config.js中进行编辑/添加：

buildModules: [
  '@nuxtjs/style-resources',
  '@nuxt/postcss8',
],

build: {
  postcss: {
    plugins: {
    },
    preset: {
    }
  }
}

- morph85

---

我的问题还没有解决。我也使用相同的nuxt版本。 - Tyler

更新的解决方案 - morph85

如果你有 autoprefixer，那就可以运行了。 - venimus

@venimus，语法应该怎么写？我尝试了：postcss: {plugins: {},preset: {autoprefixer: {},},},但是没有成功... - Merc

@Merc 你需要使用上面的精确代码（带有空的 {}）。 - venimus

只能通过将 postcss: false 设置为 false 才能使事情正常工作。 - Cliff Helsel

Answer 5

在我的情况下，使用Nuxt时，我不仅需要将以下代码添加到Nuxt配置中以禁用警告，还需要确保自动前缀工作正常！（即使自动前缀默认包含在Nuxt中并且存在.browserlistrc文件）

  build: {
    postcss: {
      preset: {
        autoprefixer: {
          overrideBrowserslist: ['last 3 versions', '> 1%']
        }
      }
    }
  }

在进行新的 Nuxt 安装后，我收到了警告，并尝试使用更新的 CSS 规则进行操作。我注意到，如果没有上述配置，filter: grayscale(100%); 将无法自动添加前缀。

编辑 .browserlistrc 文件并不能解决问题。

- antoni

Answer 6

对我来说，解决这些警告的方法是在出现警告的项目中使用npm install。也许对其他人也有用。

- Letícia

---

那不是一个具体的解决方案。而且也很明显。 - Gert Arnold