vue 引入less

Posted 2020-12-28 luziluck

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>