Vue-cli中安装并使用Less

首先安装Vue-cli,网上教程很多,这里略过

1.安装 less 和less-loader

npm/cnpm i less less-loader --save-dev

等待安装成功即可,接下来可以在vue项目中的package.json中看到less的相关依赖,如下

Vue-cli中安装并使用Less_第1张图片
图片来自本地

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

Vue-cli中安装并使用Less_第2张图片
图片来自本地

3.安装配置成功!!直接在需要的地方引入或使用即可

引入如下:

Vue-cli中安装并使用Less_第3张图片
图片来自本地

直接使用如下:

   

Vue-cli中安装并使用Less_第4张图片
图片来自本地

你可能感兴趣的:(Vue-cli中安装并使用Less)