IntellJ idea使用FileWatch实时编译less文件的方法

前言

开发前端的时候，经常会写一些less或者sass文件，但这些文件需要编译成css文件才有效，之前会使用一些自动化构建工具实时监听项目文件变化，需要做些配置。
这里使用idea的file watch插件，无需额外配置，简单方便。

操作

依赖关系

  • Node.js与idea的nodejs插件
  • File Watch插件
  • 全局安装less

插件位置

配置File watch

1.项目中新建less文件

新建less文件

2.配置less文件的file watch。

我们可以看到文件顶部有个是否开启less文件的观察器，点击YES

配置Less的File watch

点击输出路径最右边的插入预定义宏(insert Macro)，可以看到预定义的宏与它代表的内容

插入Macro界面

最终效果图

最终配置

可以看到less被实时编译成了css文件

实时编译图

额外

File watch不仅仅可以观察less文件，实时监听文件变化的操作都可以处理。我们可在Idea的配置中自行配置。

File watch位置

前端我不建议使用sass编译器，因为在windows上安装sass编译器依赖一大堆东西，又是c++，又是python的。虽然在Mac或linux上用sass没问题，在windows上使用会出现问题。less与sass功能差不多，最终也都是要编译成css的，有了这么好用的工具还是直接使用less。

总结

以上所述是小编给大家介绍的IntellJ idea使用FileWatch实时编译less文件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • IntellJ idea使用FileWatch实时编译less文件的方法

    IntellJ idea使用FileWatch实时编译less文件的方法

    前言 开发前端的时候,经常会写一些less或者sass文件,但这些文件需要编译成css文件才有效,之前会使用一些自动化构建工具实时监听项目文件变化,需要做些配置. 这里使用idea的file watch插件,无需额外配置,简单方便. 操作 依赖关系 Node.js与idea的nodejs插件 File Watch插件 全局安装less 插件位置 配置File watch 1.项目中新建less文件 新建less文件 2.配置less文件的file watch. 我们可以看到文件顶部有个是否开启l

  • 教你用JDK编译Java文件的方法

    教你用JDK编译Java文件的方法

    1.下载并安装好JDK百度网盘链接: 链接: https://pan.baidu.com/s/1j_TSvjHgw3jEBGaMk0LQ8w?pwd=pdp9 提取码: pdp9 2.设置环境变量 第一步:将JDK的安装路径bin进行复制,如:D:\Java\jdk1.8.0_221\bin 第二步:在高级选项卡中,点击环境变量按钮---->在系统变量中找Path---->选中Path点击编辑---->点击新建---->按Ctrl+V---->确定 3:打开记事本编写Java

  • Eclipse不自动编译java文件的终极解决方法

    Eclipse不自动编译java文件的终极解决方法

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般是如下几个步骤.但是还是不自动编译. 最基本的解决办法--这是前提 然后clean和refresh下项目.如果这样还是不行,用下面的方法吧,终极解决方案...... 1:去除项目中的jre的classpath 2:在将jre的包添加到classpath中来 OK,大功告成!再出现eclipse无法自

  • C#实现将javascript文件编译成dll文件的方法

    本文实例讲述了C#实现将javascript文件编译成dll文件的方法.分享给大家供大家参考,具体如下: 第一步:新建项目 添加js文件 写个测试Function (JScript.js) 单击JS文件属性.将 生成操作 改成嵌入的资源 第二步:在项目文件中添加一个类文件  该 类继承System.Web.UI.WebControl类 并重写控件预呈现的方法 代码如下: public class ClientScript:System.Web.UI.WebControls.WebControl

  • 解析VC中预编译头文件的深入分析

    一.为什么预编译头文件:预编译头的概念: 所谓的预编译头就是把一个工程中的那一部分代码,预先编译好放在一个文件里(通常是以.pch为扩展名的),这个文件就称为预编译头文件这些预先编译好的代码可以是任何的C/C++代码,甚至是inline的函数,但是必须是稳定的,在工程开发的过程中不会被经常改变.如果这些代码被修改,则需要重新编译生成预编译头文件.注意生成预编译头文件是很耗时间的.同时你得注意预编译头文件通常很大,通常有6-7M大.注意及时清理那些没有用的预编译头文件.也许你会问:现在的编译器都有

  • Java实时监控日志文件并输出的方法详解

    前言 最近有一个银行数据漂白系统,要求操作人员在页面调用远端Linux服务器的shell,并将shell输出的信息保存到一个日志文件,前台页面要实时显示日志文件的内容.这个问题难点在于如何判断哪些数据是新增加的,通过查看JDK 的帮助文档, java.io.RandomAccessFile可以解决这个问题.为了模拟这个问题,编写LogSvr和 LogView类,LogSvr不断向mock.log日志文件写数据,而 LogView则实时输出日志变化部分的数据. 代码1:日志产生类 package

  • 使用nodeJs来安装less及编译less文件为css文件的方法

    使用nodeJs来安装less及编译less文件为css文件的方法

    NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqYB3 密码:bkkh  这个链接里面有nodejs的安装包,大家可以直接下载下来,安装就可以了. 然后cmd打开控制台,检查node是否安装成功.输入node –v,如果输出的是安装包的版本号,则表示安装成功. 接下来就可以安装less了,进入node.js安装目录,通过命令npm install

  • vue编译打包本地查看index文件的方法

    /build/config/index.js assetsPublicPath: './'(编译出来可以本地查看,'/'没有点的就直接发布到线上) 以上这篇vue编译打包本地查看index文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Ubuntu环境下使用G++编译CPP文件

    第一次用g++编译cpp文件的时候报了undefined reference的错误,自定义类中的函数全部都无法找到,查找资料后发现调用的类是需要链接的,本文以一个小例子描述编译的过程.其中class2类调用了class1类的成员函数,依赖于class1类,而test文件调用了class2类的成员函数,依赖于class1类. //class1.h #ifndef _CLASS1_H #define _CLASS1_H class class1 { public: int f(int i); };

  • python 反编译exe文件为py文件的实例代码

    我们用pyinstaller把朋友文件打包成exe文件,但有时候我们需要还原,我们可以用pyinstxtractor.py 用法: python pyinstxtractor.py xxx.exe 之后得到一个这样结构的文件夹 --- xxx.exe_extracted -- out00-PYZ.pyz_extracted - 各种.pyc文件 -- out00-PYZ.pyz -- some -- others -- xxx(注意这些都是没后缀的) 然后再终端pip install uncom

随机推荐