Nextjs 的 Css 加载程序无效选项答案

【问题标题】：Css loader invalid option with NextjsNextjs 的 Css 加载程序无效选项
【发布时间】：2019-07-24 06:54:13
【问题描述】：

我在我的应用程序中使用 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.

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

【问题讨论】：

我认为你应该提供你的 webpack 配置而不是 package.json 文件
下一个js自动配置webpack，所以我不用了。

标签： reactjs webpack next.js css-loader

【解决方案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。

【讨论】：