vue项目中安装使用less

vue项目中安装使用less

**

一，安装

npm install less less-loader --save-dev

1.安装成功，可以在package.json文件中看到less的相关依赖，如图：

二，配置

找到 build/webpack.base.conf.js 文件，找到module下的rules配置加上

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

如果没有module和rules就可以自己加上（一般都是有的，没有说明你可以安装错误vue-cli或者找错文件）

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

三，使用

设置完成后 代码如果报错

**是因为less-loader的版本太高，所以，只需要将less-loader卸载后，重新下载低一点的版本
**

//卸载命令
npm uninstall less-loader

//重新下载
npm install less-loader@4.1.0

这样就ok了！