本文概述
- 要求
- 1.访问配置
- 2.配置LESS可执行路径
- 3.配置LESS文件夹以编译和输出路径
在本文中, 我们将向你展示如何正确配置NetBeans以将LESS文件自动编译为CSS。
要求 你将需要在计算机上安装Node.js, 并且需要从路径中获取npm才能进行更少的安装。如果你还没有安装该路径, 并且该路径不可用, 则可以在终端中使用以下命令进行全局安装:
npm install -g less
如果已经安装的数量较少, 则可以在NetBeans中继续进行配置。
1.访问配置 第一步, 继续打开项目的” 属性” 对话框。此对话框允许你专门更改与项目相关的设置, 并存储在项目的nbproject文件夹中。为了将LESS文件自动编译为CSS, NetBeans集成了所谓的文件监视程序, 当你对某些文件进行更改时, 该文件监视程序使你可以执行某些操作。你需要在项目中配置CSS Preprocessors选项, 因此通过右键单击项目来打开属性对话框:
文章图片
单击属性后, 将出现” 项目属性” 对话框, 在这里选择” CSS Preprocessors” 选项卡, 然后单击” Configure Executables” :
文章图片
下一步, 单击” 配置可执行文件” , 然后继续进行下一步。
2.配置LESS可执行路径 为了自动运行编译命令, Netbeans需要使用较少的编译器的绝对路径(与Node.js一起安装), 你可以在%APPDATA%/ npm / lessc.cmd中找到较少编译器路径的cmd文件。在LESS路径输入中提供以下路径:
文章图片
【如何在Windows中配置NetBeans以将LESS文件自动编译为CSS】应用或保存更改, 然后执行最后一步。
3.配置LESS文件夹以编译和输出路径 最后一步, 你需要指定将在哪里编译LESS文件, 以及在哪里生成CSS文件。在这种情况下, 我们的项目结构如下:
文章图片
因此, 我们将注册一个观察器, 将/ less中的文件转换为/ css, 并且不要忘记选中” 保存时编译LESS文件” , 因为每次你对LESS文件进行更改时都会触发此操作:
在我们项目的根文件夹中, 有更少的文件夹, 我们将在其中存储所有LESS文件。当你按CTRL + S或手动保存文件时, 它们将自动编译为CSS文件。现在, 你可以修改项目的源文件, 它们将自动构建到CSS中以供生产(请注意, 你也需要缩小这些文件以用于生产)。
编码愉快!
推荐阅读
- 如何解决TCPDF错误(一些数据已经输出,无法发送PDF文件)
- 如何在Xampp Server中启用gzip压缩
- 如何解决错误1115(42000)(在PHPMyAdmin中导入SQL文件时,未知字符集:’utf8mb4′)
- 如何在不使用jQuery的情况下使用Bootstrap前端框架(3和4)
- Twig如何使用速记语法打印变量(如果存在)(不为空)
- 如何更改Bootstrap Datetimepicker(by eonasdan)显示方向
- 如何解决Xampp MySQL错误#2002-无法建立连接,因为目标计算机主动拒绝了它
- 如何在Windows中使用TTY Plus在多个选项卡中使用PuTTY
- 在xamarin android中无法从FirebaseAuth获取刷新令牌。