Webpack NPM 模块构建失败 ValidationError: CSS Loader ...与 API 模式不匹配

【问题标题】：Webpack NPM module build failed ValidationError: CSS Loader ...does not match the API schemaWebpack NPM 模块构建失败 ValidationError: CSS Loader ...与 API 模式不匹配
【发布时间】：2021-10-18 08:42:40
【问题描述】：

我已将所有包更新到最新版本，但是当我运行我的项目脚本时，我收到一个错误，该错误以某种方式连接到我的 css 文件。我已经检查了路径文件名和我的 css 本身中的任何错误，但是它看起来完全像它假设的那样。

在错误中它说 CSS 加载器已使用与 API 架构不匹配的选项对象进行初始化。

我已尝试删除 package.json 和 node-modules 目录以重新安装它们，但这并没有解决问题。

我不了解 webpack 和 NPM，因为我目前正在学习我的方式。过去我也遇到过其他小错误，我自己纠正了，但是这个让我完全难住了！

请帮忙。

错误：

npm run dev          

> workshop_01@1.0.0 dev C:\wamp64\www\workshop_01\wp-content\themes\workshop_01
> npm-run-all -p devFast buildWatch


> workshop_01@1.0.0 devFast C:\wamp64\www\workshop_01\wp-content\themes\workshop_01
> webpack serve


> workshop_01@1.0.0 buildWatch \workshop_01\wp-content\themes\workshop_01
> webpack --watch

i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from http://localhost:3000/
i ｢wds｣: Content not from webpack is served from \workshop_01\wp-content\themes\workshop_01
assets by status 2.02 KiB [cached] 2 assets
runtime modules 663 bytes 3 modules
cacheable modules 188 bytes
  ./js/scripts.js 149 bytes [built] [code generated]
  ./css/styles.css 39 bytes [built] [code generated] [1 error]

ERROR in ./css/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (\workshop_01\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (\workshop_01\node_modules\webpack\lib\NormalModule.js:539:19)
    at Object.loader (\workshop_01\node_modules\css-loader\dist\index.js:31:27)
    at processResult (\workshop_01\node_modules\webpack\lib\NormalModule.js:713:19)
    at \workshop_01\node_modules\webpack\lib\NormalModule.js:819:5
    at \workshop_01\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at \workshop_01\node_modules\loader-runner\lib\LoaderRunner.js:251:18
 @ ./js/scripts.js 1:0-27

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.50.0 compiled with 2 errors in 2017 ms
× ｢wdm｣: asset bundled.js 411 KiB [emitted] (name: scripts) 1 related asset
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 344 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
  modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
modules by path ./css/*.css 2.52 KiB
  ./css/styles.css 2.49 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./css/styles.css 39 bytes [built] [code generated] [1 error]
./js/scripts.js 149 bytes [built] [code generated]

ERROR in ./css/styles.css (./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./css/styles.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\webpack\lib\NormalModule.js:539:19)
    at Object.loader (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\css-loader\dist\index.js:31:27)
 @ ./css/styles.css 8:6-181 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-151 83:0-151 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./js/scripts.js 1:0-27

webpack 5.50.0 compiled with 1 error in 5656 ms
i ｢wdm｣: Failed to compile.

package.json:

{
  "name": "workshop_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all -p devFast buildWatch",
    "devFast": "webpack serve",
    "buildWatch": "webpack --watch",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@glidejs/glide": "^3.4.1",
    "autoprefixer": "^10.3.1",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^6.2.0",
    "cssnano": "^5.0.7",
    "fs-extra": "^10.0.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.2.0",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^2.0.1",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.1",
    "postcss-mixins": "^8.1.0",
    "postcss-nested": "^5.0.6",
    "postcss-simple-vars": "^6.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-manifest-plugin": "^4.0.2"
  }
}

webpack.config.js：


const currentTask = process.env.npm_lifecycle_event
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const fse = require("fs-extra")

const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-simple-vars"), require("postcss-nested"), require("postcss-hexrgba"), require("postcss-color-function"), require("autoprefixer")]

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Update functions.php", function () {
      // update functions php here
      const manifest = fse.readJsonSync("./bundled-assets/manifest.json")

      fse.readFile("./functions.php", "utf8", function (err, data) {
        if (err) {
          console.log(err)
        }

        const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?'", "g")
        const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?'", "g")
        const cssRegEx = new RegExp("/bundled-assets/styles.+?'", "g")

        let result = data.replace(scriptsRegEx, `/bundled-assets/${manifest["scripts.js"]}'`).replace(vendorsRegEx, `/bundled-assets/${manifest["vendors~scripts.js"]}'`).replace(cssRegEx, `/bundled-assets/${manifest["scripts.css"]}'`)

        fse.writeFile("./functions.php", result, "utf8", function (err) {
          if (err) return console.log(err)
        })
      })
    })
  }
}

let cssConfig = {
  test: /\.css$/i,
  use: ["css-loader?url=false", { loader: "postcss-loader", options: { postcssOptions : { plugins: postCSSPlugins } }}]
}

let config = {
  entry: {
    scripts: "./js/scripts.js"
  },
  plugins: [],
  module: {
    rules: [
      cssConfig,
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      }
    ]
  }
}

if (currentTask == "devFast") {
  config.devtool = "source-map"
  cssConfig.use.unshift("style-loader")
  config.output = {
    filename: "bundled.js",
    publicPath: "http://localhost:3000/"
  }
  config.devServer = {
    before: function (app, server) {
      // server._watch(["./**/*.php", "./**/*.js"])
      server._watch(["./**/*.php", "!./functions.php"])
    },
    public: "http://localhost:3000",
    publicPath: "http://localhost:3000/",
    disableHostCheck: true,
    contentBase: path.join(__dirname),
    contentBasePublicPath: "http://localhost:3000/",
    hot: true,
    port: 3000,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
  config.mode = "development"
}

if (currentTask == "build" || currentTask == "buildWatch") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader)
  postCSSPlugins.push(require("cssnano"))
  config.output = {
    publicPath: "/wp-content/themes/workshop_01/bundled-assets/",
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "bundled-assets")
  }
  config.mode = "production"
  config.optimization = {
    splitChunks: { chunks: "all" }
  }
  config.plugins.push(new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }), new WebpackManifestPlugin({ publicPath: "" }), new RunAfterCompile())
}

module.exports = config

【问题讨论】：

  • 对于遇到涉及 css-loader 包的类似问题的其他人，我在 Hardik Sisodia 的问题和 Karl Hill 的解决方法的帮助下将 css-loader 降级到了 5.2.7：stackoverflow.com/a/68472983/2758448
  • 感谢分享您的解决方案！它帮助我找到了不需要降级的解决方案。
  • 很高兴听到，我很高兴它帮助了你！
  • 你也有机会尝试一下吗？ （我将其发布为答案，以防您错过^_^）
  • 我还没试过，但我一定会把它放在我的表盘上以备将来使用。干杯！

标签： node.js npm webpack css-loader mini-css-extract-plugin


【解决方案1】：

更改处理css文件的规则：

{
  test: /\.css$/i,
  use: ["css-loader?url=false", ...other loaders...]
}

到：

{
  test: /\.css$/i,
  use: [{loader: 'css-loader', options: {url: false}}, ...other loaders...]
}

（我遇到了与css-loader?modules=true 相同的错误）

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2022-12-18
    • 2020-07-06
    • 2018-02-18
    • 2019-12-15
    • 2019-11-06
    • 2019-12-26
    • 1970-01-01
    • 2018-09-04
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode