webpack 打包 CSS 文件，解析器兼容性问题

问题描述

  • 执行webpack打包命令
npx webpack

less-loader不兼容

异常信息
ERROR in ./src/less/index.less (./node_modules/_css-loader@4.3.0@css-loader/dist/cjs.js!./node_modules/_less-loader@11.0.0@less-loader/dist/cjs.js!./src/less/index.less)
Module build failed (from ./node_modules/_less-loader@11.0.0@less-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.lessLoader (F:\workspace\javascript workspace\less\prj9_3\node_modules\_less-loader@11.0.0@less-loader\dist\index.js:19:24)
 @ ./src/less/index.less 2:12-172 9:17-24 13:15-22
 @ ./src/js/main.js
分析原因
  • less-loader版本不匹配

解决方法

cnpm uninstall less-loader --save
cnpm install less-loader@6 --save

style-loader不兼容

异常信息
ERROR in ./src/less/index.less
Module build failed (from ./node_modules/_style-loader@3.3.1@style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (F:\workspace\javascript workspace\less\prj9_3\node_modules\_style-loader@3.3.1@style-loader\dist\index.js:19:24)
 @ ./src/js/main.js 1:0-27
分析原因
  • style-loader版本不匹配

解决方法

cnpm uninstall style-loader --save
cnpm install style-loader@2.0.0 --save

css-loader不兼容

异常信息
ERROR in ./src/less/index.less (./node_modules/_css-loader@6.7.1@css-loader/dist/cjs.js!./node_modules/_less-loader@6.2.0@less-loader/dist/cjs.js!./src/less/index.less)
Module build failed (from ./node_modules/_css-loader@6.7.1@css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (F:\workspace\javascript workspace\less\prj9_3\node_modules\_css-loader@6.7.1@css-loader\dist\index.js:31:27)
 @ ./src/less/index.less 2:12-171 9:17-24 13:15-22
 @ ./src/js/main.js
分析原因
  • css-loader版本不匹配

解决方法

cnpm uninstall css-loader --save
cnpm install css-loader@4 --save