在WebStorm里配置watcher实现编辑less文件时自动生成.css文件

来源:互联网 发布:面对网络舆论你怎么看 编辑:程序博客网 时间:2024/05/19 12:28

前言

使用cnpm下载的less 如何在webstorm里配置


开始动手

1.操作前确定成功安装less。
1)去官网下载node.js, 并安装
2) node -v npm -v 查看node,npm是否安装成功
如果进任意目录都显示版本 说明是全局安装; (如果需要全局环境,而又没有全局安装,则需要配置环境变量)
3)使用淘宝镜像安装cnpm
4)cmd 进入到 打算放模块的路劲 ,cnpm install less
在这个路劲的文件夹里可以看到modules文件夹了
这里写图片描述
这里写图片描述
2.webstorm里的设置

1.打开WebStrom,随便新建一个Less File,会自动提示是否将less加入watcher,点击【Add watcher】,
注意 这里的lessc.cmd是在.bin里面 。并不在less文件夹下
从网上的资料看,用npm安装的less,lessc.cmd在npm文件夹下。所以如果找不到lessc.cmd路径的话就 用电脑文件名搜索的功能搜索一下吧~
这里写图片描述
这里写图片描述

保存之后,实时编译less,就会出来css文件;

(我在配置的时候出了两个问题:
1.糊糊涂涂的装了less,然后找不到路劲。
2.一直以为lessc.cmd在less文件夹下,所以悲剧了
)记录一下,以免以后用起来又重复错误

阅读全文
0 0