码迷,mamicode.com
首页 > 其他好文 > 详细

代码分析vue中如何配置less

时间:2018-10-18 00:58:35      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:bar   else   cell   res   install   cti   UNC   ports   head   

安装

1
npm install --save-dev less less-loader
1
npm install --save-dev style-loader css-loader

先在index.html页面head标签内插入这段代码

精品视频教程:百度网盘下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 (function (doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
  recalc = function () {
   var clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   if (clientWidth >= 640) {
   docEl.style.fontSize = ‘100px‘;
   } else {
   docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;
   }
  };
  
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
 })(document, window);
 </script>

在添加 build/webpack.base.conf.js 里面的

module.exports 里的 module 里添加下面这段配置

精品视频教程:百度网盘下载

1
2
3
4
5
6
7
8
{
  test: /\.less$/,
  use: [
   "style-loader",
   "css-loader",
   "less-loader"
  ]
  }

组建 headers

精品视频教程:百度网盘下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
 <div> <p>header</p> </div>
</template>
  
<script>
export default {
 name: "headers",
 data() {
 return {};
 }
};
</script>
  
<style scoped>
.box {
 height: 300/50rem;
 width: 200/50rem;
 
 font-size: 16/50 rem;
}
</style>

效果展示:

技术分享图片

代码分析vue中如何配置less

标签:bar   else   cell   res   install   cti   UNC   ports   head   

原文地址:https://www.cnblogs.com/sdmwtssss/p/9807615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!