vue-cli使用less配置

作者: 年少有van | 来源:发表于2018-12-11 15:53 被阅读0次

    今天算是踩了个坑吧...

    我想要在我用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,否则我可能还在挣扎。

    相关文章

      网友评论

        本文标题:vue-cli使用less配置

        本文链接:https://www.haomeiwen.com/subject/xscehqtx.html