时间戳

首页 > 解决方案 > Vue js 无法解析组件中的css代码

vue.js - Vue js 无法解析组件中的css代码

问题描述

我正在使用 vue js + laravel 创建一个项目。但是当我运行npm run watch命令时我遇到了一个问题。

Vue js 抛出下面的错误，项目没有构建。

ERROR in ./node_modules/sweetalert2/dist/sweetalert2.min.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/sweetalert2/dist/sweetalert2.min.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 (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 (/var/www/liaratech/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
at Object.getOptions (/var/www/liaratech/node_modules/webpack/lib/NormalModule.js:527:19)
at Object.loader (/var/www/liaratech/node_modules/css-loader/dist/index.js:31:27)

我意识到 vue js 无法解析 vue js 组件文件中的 css 代码。

我该如何解决？

标签： vue.js

解决方案

这里的问题是 css-loader 的版本不匹配。使用 css-loader@^3.0.0 解决了这个问题（我猜 laravel-mix 和 sweetalert2 似乎使用不同的版本）。

"devDependencies": {
  "css-loader": "^3.0.0"
}

推荐阅读