Vue2.0 中使用Less

第一步  npm安装less

npm install less less-loader --save

 

第二步  修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加如下代码

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

 

第三步  在组件中的style 添加lang="less"

如引入外部less文件则在style标签之后引入 @import './index.less'，如下列代码

<style lang="less">
@import './index.less';  //引入全局less文件
</style>

 

如若在使用过程中出现以下报错 

this.getOptions is not a function报错的主要原因是vue脚手架中less-loader的版本过高导致的

 

 解决方法：

首先将原来的 less-loader 删除

npm uninstall less-loader

然后在重新npm less-loader

npm install less-loader@4.1.0 --save