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 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，但没有找到解决问题的方法。

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。

Nextjs的CSS加载程序无效选项

1 个答案: