Webstorm 10 自动编译 LESS(windows环境)

0. 安装 NodeJS + LESS

登陆 NodeJS 官网,下载对应版本安装。
WIN键 + R 打开 CMD 窗口,输入

node -v npm -v

能够回显版本号就证明安装成功了
输入 npm 并回车,进入 npm 模式,执行

npm install less -g

安装 LESS,这里容易撞墙,卡住了就挂个梯子。

1. 设置下windows文件夹选项,让系统显示隐藏文件。

2. 添加 File Watcher

打开 Webstorm ,依次展开菜单 File –> Setting –> Tools –> File Watchers
点击右侧加号添加一个新的 File Watcher(或者直接在 Project 目录里新建一个.less文件,用Webstorm打开时会自动提示创建 File Watcher)。
设置如图2, 添加完成后 Webstorm 就可以自动编译 LESS 文件了。

图1. 添加File Watcher

图2. 参数设置

Program:  C:\Users\yourname\AppData\Roaming\npm\lessc.cmd
Arguments:  –no-color $FileName$
Working directory:  $FileDir$
Output paths to refresh:  $FileNameWithoutExtension$.css
时间: 2024-12-28 15:13:45

Webstorm 10 自动编译 LESS(windows环境)的相关文章

Jenkins搭建.NET自动编译发布远程环境

继上一篇文章Jenkins搭建.NET自动编译发布本地环境 发布到本地成功后,接下来配置发布到远程环境. Build配置——发布到本地 根据前面VS中发布项目,生成的CustomProfile2 来配置 1.MSBuild Build File:配置为.\angularDemo\angularDemo.csproj 或者C:\Program Files (x86)\Jenkins\workspace\FirstSite\angularDemo.sln都可以. 2.Build的命令行参数: 配置参

win8.1 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建

win8.1 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建 重编译的好处:可以调试的时候看OpenCV的源代码. 重编译要得到的东西:Debug版本和Release版本的dll,lib,头文件.(dll添加到环境变量里,运行时用,自己编译的dll调试时可以跟踪到Opencv的源码内:lib和头文件配置到编译器里) PS:如果只是使用Opencv而不需要跟踪源码,则使用Opencv自带的库文件即可.跳到5配置Opencv开发环境,对应的文件都在..\opencv\b

win10 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建

win10 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建 重编译的优点:能够调试的时候看OpenCV的源码. 重编译要得到的东西:Debug版本号和Release版本号的dll,lib,头文件.(dll加入到环境变量里,执行时用,自己编译的dll调试时能够跟踪到Opencv的源代码内:lib和头文件配置到编译器里) PS:假设仅仅是使用Opencv而不须要跟踪源代码,则使用Opencv自带的库文件就可以. 跳到5配置Opencv开发环境.相应的文件都在..\ope

flink源码编译(windows环境)

前言 最新开始捣鼓flink,fucking the code之前,编译是第一步. 编译环境 win7 java maven 编译步骤 https://ci.apache.org/projects/flink/flink-docs-release-1.6/start/building.html   官方文档搞起,如下: Building Flink from Source This page covers how to build Flink 1.6.1 from sources. Build

webstorm less 自动编译

一.配置 Arguments中的--no--color 是禁用色彩输出,具体可查 https://www.w3cschool.cn/less/less_command_line_usage.html 少了一个路径配置的地方,这里补上. 二.结果 三.补充 补充下less文件创建的问题,可能有人已经把Less添加到模板了,但是还是没有像Vue Fille一样单独出来一个选项,事实上,Less是CSS的升级版,相当于样式文件,所以新建的时候选择Stylesheet,在类别中选择Less File就好

webstorm下的sass自动编译和移动端自适应实践

http://www.fawwheel.com/shahramLu/p/6477731.html webstorm下的sass自动编译和移动端自适应实践 1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择RubyInstall,下载地址 RubyInstall下载地址 选择对应系统的版本,下载完成,安装 添加到path,建议勾上,安装完成后,打开开始面板,

WebStorm自动编译LESS产出CSS和source maps

1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选Enable JavaScript source maps   Enable CSS source maps. 2.打开WebStorm,点File-->Settings,找到File Watchers,点右侧的“+”,选择LESS,更改两项设置如下: Program: C:\Users\wind\AppData\Roaming\npm\lessc.cmd   (less的安装路

windows环境下使用apxs编译添加apache模块

windows环境下使用apxs编译添加apache模块 简介说明:本文使用mod_limitipconn模块为例. 环境: windows7 x86系统 apache 2.4.18 目标: 在windows环境下,利用mod_limitipconn0.24源码.apxs为apache2.4.18添加mod_limitipconn模块. 分析: limitipconn模块最新版已经支持apache2.4了.但是没有编译好的对应版本.因此需要自己动手编译模块.在windows下要实现这个目标,需要

Windows环境下使用VS2005编译OpenSSL

如何Windows环境下,使用VS2005编译OpenSSL,虽然这个问题在Baidu.Google上一堆,但安装中还是遇到些问题,在这里 记录下来希望能帮助大家不要在走弯路.注:我是在WinXP SP3下使用VS2005SP1下编译成功的,OpenSSL的版本是0.9.8l. http://www.cnblogs.com/moonset7/archive/2009/12/18/1627317.html by 月落上弦 一.编译OpenSSL  准备工作:下载OpenSSL源码 官方网站下载Op