VUE—使用vue框架时怎么使用less写css样式（图文详情）

VUE—less依赖

第一步：输入指令：
mac要加上sudo

sudo cnpm install less less-loader --D

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

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

在这里插入图片描述

第三步：在static新建js文件夹引入rem.js文件并在index.html里直接script引入即可
在这里插入图片描述

这是rem的内容，适用于移动端响应式布局

(function () {
	var PixelRatio = 1/window.devicePixelRatio;
	var oHtml = document.getElementsByTagName('html')[0];
	var pageWidth = 0;
	document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+PixelRatio+',maximum-scale='+ PixelRatio +', minimum-scale='+ PixelRatio +'" />');

	pageWidth = oHtml.getBoundingClientRect().width;
	oHtml.style.fontSize = pageWidth/10 + 'px';
	window.onresize = function () {
		pageWidth = oHtml.getBoundingClientRect().width;
		oHtml.style.fontSize = pageWidth/10 + 'px';
	};
})()

第四步：测试
1、在assets文件夹新建less文件夹并新建base.less，输入公共内容@r： 75rem；注意结尾分号
在这里插入图片描述
这时console。log会发现，你的body的font-size是75px

2、在需要用的vue引入@import’～@/assets/less/base.js
并将style里的scoped删除，增加lang=‘less’

3、按照less格式写样式看是否生效

我的是生效的