Vue+Laravel项目运行npm run watch时CSS Loader报错无法解析组件CSS如何解决

该报错是css-loader版本与构建配置不兼容导致，v6及以上版本的options.url参数仅支持布尔值或带filter属性的对象，旧版配置中传入的非法值触发了schema校验失败，可通过以下任意一种方案修复：

• 方案1：修正css-loader配置项
  若项目存在自定义webpack配置（Laravel项目一般修改webpack.mix.js），调整css-loader的url参数为符合要求的格式即可：
  如果使用原生webpack配置，修改css-loader规则：

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // 开启url处理设为true，关闭设为false
            url: true
            // 需过滤部分url时使用对象写法
            // url: {
            //   filter: (url) => !url.startsWith('/static')
            // }
          }
        }
      ]
    }
  ]
}

如果使用Laravel Mix，可通过override方法批量修正配置：

// 写入webpack.mix.js文件末尾
mix.override(config => {
  config.module.rules.forEach(rule => {
    if (rule.test.toString().match(/css|less|s[ac]ss/)) {
      rule.use.forEach(use => {
        if (use.loader.includes('css-loader')) {
          use.options.url = true
        }
      })
    }
  })
})

修改完成后重新执行npm run watch即可。

• 方案2：降级css-loader到兼容版本
  不想修改配置的话，直接安装适配旧版配置的css-loader v5版本即可：

npm install css-loader@5.2.7 --save-dev

安装完成后重新执行构建命令即可正常运行。

• 方案3：升级Laravel Mix到最新版本
  旧版Laravel Mix内置的loader配置没有适配高版本css-loader的API，直接升级Mix版本即可解决兼容问题：

npm install laravel-mix@latest --save-dev

升级完成后删除node_modules目录、package-lock.json或yarn.lock文件，重新执行npm install后再运行构建命令即可。

内容的提问来源于stack exchange，提问作者farhad.a