首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/

安装Node.js的时候会自动安装npm

然后,安装lessc模块

打开cmd控制台

输入下面一行npm命令,安装less模块:-g是全局安装,如果不加会安装在当前目录。

npm install less -g

安装less-plugin-clean-css插件(less的插件,用于压缩代码)

npm install less-plugin-clean-css -g

PHPStorm 点击File>Settings>Tools>File Watcher 添加less自动编译参数

PhpStrom会自动识别lessc.cmd文件,如果不能识别,手动找到npm目录的lessc.cmd文件即可,我这里添加的--clean-css参数会自动代码压缩,也可以不加,就不会自动压缩代码了。

这样在项目里编辑less文件时,会自动时时生成css文件了

效果如下:

WebStorm怎么设置实现自动编译less文件的更多相关文章

  1. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  2. Eclipse不自动编译java文件的终极解决方案

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...

  3. Eclipse不能自动编译 java文件的解决方案

    前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...

  4. Eclipse不能自动编译 java文件,不会生成CLASS

    每次修改类代码后都得重启 Tomcat 花了1天终于解决,网上所说基本是下面1和2的方法,使用之后还是不行最后重新建工作环境导入项目对比了一下找到第三种方法 1.Project 下有个 "B ...

  5. Eclipse不能自动编译 java文件

      在网上的解决方法 方法参考如下: (1) Window-->Preferences-->General-->Workspace  有个"Build automatica ...

  6. Tomcat不能自动编译JSP文件问题的一种解决方法

    今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...

  7. webstoem自动编译less文件

    去node的主页下载对应版本的nodejs然后安装下载地址:http://nodejs.org/   根据自己的系统选择合适的版本下载. 安装完成之后打开命令提示符(win+r 输入cmd 回车),分 ...

  8. 安利一个MVC的好东西,RazorGenerator.MsBuild,可以自动编译cshtml文件

    在传统的asp.net webForm 开发里,在发布时,如果选择预编译,就会自动将所有的aspx 文件编译,在发布后的目录里,就看不到aspx的源代码了,同时因为是预编译的,所以每个页面打开速度都挺 ...

  9. 利用babel自动编译es6文件

    一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...

随机推荐

  1. python根据窗口标题找句柄,将窗口前置活动

    import time, threading, copy import win32api, win32con import win32gui import win32gui def zhaojb(aa ...

  2. C预处理跨平台

    #include <stdio.h> //不同的平台下引入不同的头文件 #if _WIN32 //识别windows平台 #include <windows.h> #elif ...

  3. vite插件-自动生成vue组件文档

    特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vu ...

  4. 图像处理算法的仿真平台之VGA时序

    一  概述 图像处理算法一般是用matla或OpenCV实现的,若是用FPGA实现,设计思路差别极大.matlab和opencv的优势:这些工具的优势在于可以方便地载入图像文件,或输出数据到图像文件, ...

  5. 微信小程序云开发-云存储-下载并打开文件文件(word/excel/ppt/pdf)

    一.wxml文件 1.写文本框,用来获取文件链接. 2.按钮,点击下载文件 <!-- 下载文件(word/excel/ppt/pdf等) --> <view class=" ...

  6. 【数论】A%B Problem luogu-1865

    题目描述 让你输出区间内的素数的个数 分析 预处理筛法,在随便搞一下就好了. AC代码 #include <bits/stdc++.h> using namespace std; #def ...

  7. odoo时间过滤

    Odoo中本日.本月.上月过滤器实现方法   Odoo中本日.本月.上月过滤器实现方法<filter string="今日订单" name="today" ...

  8. Thinkphp 分页应用

    $Table = M('Table'); $count = $Table ->where()->count();        $Page = new \Think\Page($count ...

  9. joomla 3.7.0 (CVE-2017-8917) SQL注入漏洞

    影响版本: 3.7.0 poc http://192.168.49.2:8080/index.php?option=com_fields&view=fields&layout=moda ...

  10. python算法练习(1)抓交通肇事犯

    抓交通肇事犯 1.问题描述 一辆卡车违反交通规则,撞人后逃跑.现场有三人目击该事件,但都没有记住车号,只记下了车号的一些特征.甲说:牌照的前两位数字是相同的:乙说:牌照的后两位数字是相同的,但与前两位 ...