Laravel 在 Vue 组件中混合“无法识别的输入”

问题描述

将 webpack 从版本 3 升级到 5 后，我收到内联加载样式错误。

✖ Mix
  Compiled with some errors in 2.29s

ERROR in ./app/Admin/assets/partials/bootstrapForm/ImageSelector.vue?vue&type=style&index=0&id=833cd440&scoped=true&lang=less& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-17[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-17[0].rules[0].use[2]!./node_modules/less-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/Admin/assets/partials/bootstrapForm/ImageSelector.vue?vue&type=style&index=0&id=833cd440&scoped=true&lang=less&)
Module build Failed (from ./node_modules/less-loader/dist/cjs.js):


import api from "!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
              ^
Unrecognised input
      Error in /workspace/app/Admin/assets/partials/bootstrapForm/ImageSelector.vue (line 1,column 16)

webpack compiled with 1 error

如果删除 LESS LOADER：

rules: [
      {
        test: /\.less$/i,use: ['style-loader','css-loader','less-loader'],},...

问题丢失了，但是css inline不会被添加到页面中。 这是 package.json 的一小部分

    "@babel/compat-data": "^7.13.8","@babel/eslint-parser": "^7.13.14","@babel/plugin-transform-runtime": "^7.13.10","@babel/preset-env": "^7.13.10","@vue/component-compiler-utils": "^3.2.0","css-loader": "^5.2.4","laravel-mix": "^6.0.18","less": "^4.1.1","less-loader": "^8.1.1","vue": "^2.6.12","vue-loader": "^15.9.6","webpack": "^5.25.0"
    "@babel/plugin-Syntax-dynamic-import": "^7.8.3","vue-template-compiler": "^2.6.12","vuex": "^2.3.1"

组件代码ImageSelector.vue：

<style scoped lang="less">
    .image-selector {
        input[type=file] {
            display: none;
        }
        img {
            max-height: 200px;
        }
    }
</style>

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）