博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Hbuilder编辑器 设置less即时编译环境
阅读量:5085 次
发布时间:2019-06-13

本文共 682 字,大约阅读时间需要 2 分钟。

 之前一直用的纯css写样式表,习惯成自然,觉得less写起来反而比较麻烦,直到写移动端页面要用到rem单位进行计算时才知道less的好

处,但是less编译这块又有点让人为难了,作为菜鸟的我刚开始是使用的koala编译工具进行实时编译成css,但是这种比较麻烦,要一直

开着koala,随后才想到有没有在编辑器里内置的鱼编译工具,叭叭叭说一堆,下面说重点吧;

 

第一步:在hbuilder编辑器里  依次打开菜单栏->工具->预编译器设置,打开后是这样的:

  

2,选择新建:文件后缀为.less   

 

3: 然后点击确定; 变成如下图  

  

  在node环境下全局安装less(输入):npm install -g less   然后等着安装完成,

  输入less -v检查版本号,如果有说明安装完成;

  安装完成要记得lessc.cmd所在的地址;(这里是默认的:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc

   下图中触发命令地址就是lessc.cmd地址;工作目录可以不填写(点完智能完成默认的css生

  成地址就是.less文件同级目录,命令参数填写:%FileName% %FileBaseName%.css ; 点 智能完成,

   然后就ok了 ,写less文件后边就会自动生成一个同名的css文件了,将css文件引入到页面就可以编写less了;

 

 

 

转载于:https://www.cnblogs.com/wtt52800/p/7878058.html

你可能感兴趣的文章
基本封装方法
查看>>
bcb ole拖拽功能的实现
查看>>
生活大爆炸之何为光速
查看>>
bzoj 2456: mode【瞎搞】
查看>>
[Typescript] Specify Exact Values with TypeScript’s Literal Types
查看>>
[GraphQL] Reuse Query Fields with GraphQL Fragments
查看>>
Illustrated C#学习笔记(一)
查看>>
理解oracle中连接和会话
查看>>
两种最常用的Sticky footer布局方式
查看>>
Scrapy实战篇(三)之爬取豆瓣电影短评
查看>>
HDU 5510 Bazinga KMP
查看>>
[13年迁移]Firefox下margin-top问题
查看>>
Zookeeper常用命令 (转)
查看>>
Java程序IP v6与IP v4的设置
查看>>
RUP(Rational Unified Process),统一软件开发过程
查看>>
数据库链路创建方法
查看>>
Enterprise Library - Data Access Application Block 6.0.1304
查看>>
重构代码 —— 函数即变量(Replace temp with Query)
查看>>
Bootstrap栅格学习
查看>>
程序员的数学
查看>>