Css加载器对Nextjs的无效选项

Question

我在我的app中使用next 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 run 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.

我试着用谷歌搜索，但我找不到解决我的问题的办法。

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。