今天算是踩了个坑吧...
我想要在我用vue-cli创建的项目中使用less,于是乎想到要在webpack中进行配置,根据我搜集到的信息,我应该作出如下类似的配置(有的教程则配置得更加高级和复杂一点):
但是在我npm run dev的时候,编译却失败了,出现了一些报错,类似于:
error in ./src/styles/special/index.less
Module build failed:
// load the styles
var content = require("!!../../../node_modules/css-loader/index.js??ref--9-1!../../../node_modules/postcss-loader/lib/index.js??ref--9-2!../../../node_modules/less-loader/dist/cjs.js??ref--9-3!./index.less");
^
Unrecognised input
in C:\Users\xx\Desktop\atodo\src\styles\special\index.less (line 4, column 12)
@ ./src/styles/special/index.less 2:14-343 21:1-42:3 22:19-348
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Main.vue @ ./src/pages/Main.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
我怀疑问题出在webpack配置上,于是搜索我的问题,最后发现其实:
不用配置...
对,就是不用配置,准确说是使用vue-cli创建并且选择使用webpack的项目使用less不需要再对webpack进行配置。
在/build/utils.js
中搜索less就会发现less: generateLoaders('less')
,再结合generateLoaders函数来看,其实vue-cli本身已经做好了配置。
所以,在删除了webpack中我自己写的配置过后,我的项目编译通过了。
这个方法我参考了http://blog.ipsfan.com/4260.html,否则我可能还在挣扎。
网友评论