首先,需要保证电脑安装过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. NFS共享存储服务

    NFS共享存储服务                一.NFS共享                  1)NFS(Network File System)网络文件系统                   ...

  2. ssh服务两句话

    ssh服务采用"非对称密钥系统":主要通过两把不一样的公钥和密钥来进行加密与解密的过程 公钥(Public Key):提供给远程主机进行数据加密 私钥(Private Key):远 ...

  3. c语言:结果不理解

    #include <stdio.h> int main() { int a;float b; scanf("a=%d,b=%f",&a,&b); pri ...

  4. Nacos源码分析-Distro协议概览

    温馨提示: 本文内容基于个人学习Nacos 2.0.1版本代码总结而来,因个人理解差异,不保证完全正确.如有理解错误之处欢迎各位拍砖指正,相互学习:转载请注明出处. 什么是Distro协议 今天来分析 ...

  5. ES6 对象定义简写及常用的扩展方法

    1.ES6 对象定义简写 es6提供了对象定义里的属性,方法简写方式: 假如属性和变量名一样,可以省略,包括定义对象方法function也可以省略 <script type="text ...

  6. java网络编程基础——网络基础

    java网络编程 网络编程基础 1.常用的网络拓扑结构: 星型网络.总线网络.环线网络.树形网络.星型环线网络 2.通信协议的组成 通信协议通常由3部分组成: 语义部分:用于决定通信双方对话类型 语法 ...

  7. python -- 模块与类库

    一.模块 模块(Module)是由一组类.函数和变量组成的,模块文件的扩展名是.py或.pyc 在使用模块之前,需要先使用import语句导入这个模块. 语法格式如下: import 模块名 from ...

  8. NOI2021游记

    NOI2021游记 前言 写于 2021.7.28,成绩榜刚出后几个小时.总分 345 拿到银牌 183 名. 我的高中 OI 生活在这里画上句号.结局对我而言虽然不够完美,但是无论怎样都是我人生道路 ...

  9. SpringCloud-Alibaba 最新的 依赖版本管理组合以及 整合gateway遇到的问题

    一般来说,cloud 与 alibaba 拥有版本组合说明文档wiki,不过这里可以做一个最新的组合的分享. <dependencyManagement> <dependencies ...

  10. JavaScript实现,判断一个点是否在多边形内(简直nice,希望能帮到你)

    //定义点的结构体 function point(){ this.x=0; this.y=0; } //计算一个点是否在多边形里,参数:点,多边形数组 function PointInPoly(pt, ...