美文网首页
WebStrom配置Less,实现实时编译

WebStrom配置Less,实现实时编译

作者: Anfly | 来源:发表于2017-03-07 17:37 被阅读385次

    配置环境

    1、安装webstrom

    2、安装nodeJShttp://nodejs.cn/download/选择windows系统(.msi)下载完成后直接安装

    win+r打开cmd命令行,输入node -v 显示node版本表示安装成功。

    3、安装less

          ①win+r打开cmd命令行工具,输入npm install -g less 安装less,

          ②可能错误:出现多个npm err、node err

                   解决办法:尝试输入npm config set strict-ssl false,问题解决再恢复:npm config set strict-ssl true

           ③安装完成后,注意提示路径,找到完成后提示的路径,复制路径:"users\Administrator\AppData\Roaming\npm\lessc.cmd"

    4、配置webstorm

    file>settings>Tools>file Watchers>

    找到右边的绿色的+,选择Less文件,弹出设置菜单

    配置Less编译菜单,设置Program地址:安装less第三步复制的路径users\Administrator\AppData\Roaming\npm\lessc.cmd ,其余选项不用更改

    做完配置后,在webstorm所在项目中创建Less文件

    可能错误,编辑器控制台报错,提示node+乱码,可能node没有安装成功,或者安装成功后系统配置没有完全,可以尝试重启电脑若还报错重装nodeJS

    如果没有错误,则可以看到Less文件创建后提示有下级文件夹,生成同名css文件。每次更改less文件,css文件实时编译,同步更改。

    然后就可以快乐的使用Less了     ~~O(∩_∩)O~~

    相关文章

      网友评论

          本文标题:WebStrom配置Less,实现实时编译

          本文链接:https://www.haomeiwen.com/subject/xbomgttx.html