After upgrade webpack from verstion 3 to 5 I get error with inline load styles.
✖ 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
If remove LESS LOADER:
rules: [
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader'],
},
...
the problem is lost, but css inline will not be added to page. Here is small partion of 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"
Component code ImageSelector.vue:
<style scoped lang="less">
.image-selector {
input[type=file] {
display: none;
}
img {
max-height: 200px;
}
}
</style>
Have any ideas?