求助!!webpack3升级到webpack4之后less问题

147 阅读1分钟

vue项目webpack3升级到webpack4之后,使用less less-loader解析文件报错

package.json的版本号

"dependencies": {
  "@babel/runtime-corejs3": "^7.22.6",
  "autofit.js": "^2.0.5",
  "axios": "^1.5.0",
  "compression-webpack-plugin": "^1.1.11",
  "core-js": "^3.33.2",
  "echarts": "^5.0.1",
  "echarts-gl": "^2.0.0",
  "el-table-infinite-scroll": "^1.0.10",
  "element-ui": "^2.15.13",
  "fastclick": "^1.0.6",
  "vue": "^2.5.2",
  "vue-animate-number": "^0.4.2",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1"
},
"devDependencies": {
  "@babel/core": "^7.22.9",
  "@babel/plugin-transform-runtime": "^7.22.9",
  "@babel/preset-env": "^7.24.0",
  "autoprefixer": "^7.1.2",
  "babel-helper-vue-jsx-merge-props": "^2.0.3",
  "babel-loader": "^8.0.4",
  "babel-plugin-syntax-jsx": "^6.18.0",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-plugin-transform-vue-jsx": "^3.5.0",
  "chalk": "^2.0.1",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^5.2.7",
  "file-loader": "^6.2.0",
  "friendly-errors-webpack-plugin": "^1.6.1",
  "html-webpack-plugin": "^4.5.2",
  "less": "^3.13.1",
  "less-loader": "^4.1.0",
  "mini-css-extract-plugin": "^1.6.2",
  "node-notifier": "^5.1.2",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
  "ora": "^1.2.0",
  "portfinder": "^1.0.13",
  "postcss": "^8.4.29",
  "postcss-import": "^11.0.0",
  "postcss-loader": "^3.0.0",
  "postcss-url": "^7.2.1",
  "preload-webpack-plugin": "3.0.0-beta.4",
  "rimraf": "^2.6.0",
  "semver": "^5.3.0",
  "shelljs": "^0.8.4",
  "style-loader": "^2.0.0",
  "ts-loader": "^8.3.0",
  "typescript": "^5.2.2",
  "uglifyjs-webpack-plugin": "^2.2.0",
  "url-loader": "^0.5.8",
  "vue-loader": "^15.9.6",
  "vue-loader-plugin": "^1.3.0",
  "vue-style-loader": "^4.1.3",
  "vue-template-compiler": "^2.5.2",
  "webpack": "^4.5.0",
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^4.15.2",
  "webpack-cli": "^4.10.0",
  "webpack-merge": "^4.1.0"
},

这是我的配置文件,修改webpack.base.conf.js等文件之后,打包没有问题,可以正常看到结果,但是启动dev本地服务器之后

{
  ```
{
  test: /.less$/,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'less-loader'
  ]
},
```
},

这是css相关的loader配置,版本号在上面。 vue项目在对应的组件里使用

<style scoped lang="less">
@import "../index.less";
@import "./manualIndexPage.less";
</style>

启动dev之后就报这样的错误,如果删除这两个less文件引用或者不用less就不会报错,打包一切正常

image.png 这个应该怎么解决!!跪求大神