1.
引入的组件：
less
style-loader
css-loader
less-loader
2.
main.js引入
import '!style-loader!css-loader!less-loader!./assets/css/reset.less'
3.
App.vue引入：
<script>
//flexible.js(适配移动端)
(function flexible(window,document){
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
//adjust body font size
function setBodyFontSize(){
if(document.body){
document.body.style.fontSize = (12*dpr)+'px'
}else{
document.addEventListener('DOMContentLoaded',setBodyFontSize)
}
}
setBodyFontSize();
//set 1rem = viewWidth / 10
function setRemUnit (){
var rem = docEl.clientWidth/10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
//reset rem unit on page resize
window.addEventListener('resize',setRemUnit)
window.addEventListener('pageshow',function(e){
if(e.persisted){
setRemUnit();
}
})
//detect 0.5px supports
if(dpr >=2 ){
var fakeBody = document.createElement('body');
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if(testElement.offsetHeight === 1){
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window,document))
export default {
name: 'App'
}
</script>
4.
vue文件less部分引入
<style scoped lang="less" rel="stylesheet/less">
@import "../assets/css/common.less";
.m-header{
.w(750);
.h(100);
background-color:purple;
.fs(30);
color:red;
}
</style>