Css Nextjs 的加载器选项无效

Question

我在我的应用程序中使用下一个 js（它自动使用 webpack），这是我的 package.json:

{
  "name": "myreact",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "bootstrap": "^3.3.4",
    "classnames": "^2.2.6",
    "css-loader": "^2.1.0",
    "express": "^4.16.4",
    "next": "^8.0.3",
    "next-images": "^1.0.4",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

这是我的 next.config.js:

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withImages());

然而，当我使用 npm 运行 dev 时，它总是抛出一个错误：

ValidationError: CSS Loader Invalid Options

options should NOT have additional properties
Could not find files for /index in .next/build-manifest.json
Warning: Each child in a list should have a unique "key" prop.

我已经尝试 google 但我没有找到解决问题的方法。

Answer 1

您正在使用添加了选项验证的新 css-loader (v2.0.0)。

您可以从 webpack 配置中打印 cssLoader 选项，并删除多余的选项。

为了打印 webpack 配置，您需要将 next.config.js 文件更改为：

const withCSS = require('@zeit/next-css');
const withImages = require('next-images');

module.exports = withCSS(withImages({
  webpack: (config, options) => {
     console.log(config);
     return config;
  }
}));

在此之前，你不应该安装你的dep (next-css) dep (css-loader)，尝试将它从你package.json中删除并重新安装，这应该可以解决，不行的话试试我的建议

有一个 github 讨论帖：https://github.com/webpack-contrib/css-loader/issues/863#issuecomment-445747386。

Css Nextjs 的加载器选项无效

Css loader invalid option with Nextjs

reactjs

webpack

next.js

css-loader