个性化阅读
专注于IT技术分析

如何在Windows中配置NetBeans以将SASS或SCSS文件自动编译为CSS

本文概述

Sass(语法上很棒的样式表)是CSS的扩展, 使你能够使用变量, 嵌套规则, 内联导入等功能。它还有助于使事情井井有条, 并允许你更快地创建样式表。借助于NetBeans中CSS预处理器的实现, 你将能够在项目中动态地自动编译SASS文件, 因此你无需每次稍作更改即可自行运行命令。

在本文中, 我们将向你展示如何正确配置NetBeans, 以将SASS和SCSS文件自动编译为CSS。

要求

你将需要计算机上可用的SASS。 Sass需要首先安装Ruby, 并使其在命令提示符下的路径中可用。一旦在计算机上安装了Ruby, 就可以在终端中使用以下命令安装sass gem:

gem install sass

如果已经安装了sass, 则可以在NetBeans中继续进行配置。

1.访问配置

第一步, 继续打开项目的”属性”对话框。此对话框允许你专门更改与项目相关的设置, 并存储在项目的nbproject文件夹中。为了将SASS文件自动编译为CSS, NetBeans集成了所谓的File Watchers, 当你对某些文件进行更改时, 它们可以执行一些操作。你需要在项目中配置CSS Preprocessors选项, 因此通过右键单击项目来打开属性对话框:

Netbeans项目属性

单击属性后, 将出现”项目属性”对话框, 在这里选择” CSS Preprocessors”选项卡, 然后单击” Configure Executables”:

Netbeans Sass自动配置

下一步, 单击”配置可执行文件”, 然后继续进行下一步。

2.配置SASS可执行路径

为了自动运行编译命令, Netbeans需要sass编译器的绝对路径(与Ruby一起安装), 你可以在C:\ Ruby24-x64 \ bin \ sass.bat中找到sass编译器路径的cmd文件。在” SASS路径”输入中提供以下路径:

SASS在Windows中的Netbeans中配置可执行路径

应用或保存更改, 然后执行最后一步。

3.配置SASS文件夹以编译和输出路径

最后一步, 你需要指定将在哪里编译SASS文件, 在哪里应该生成CSS文件。在这种情况下, 我们的项目结构如下:

Netbeans SASS文件夹结构

因此, 我们将注册一个观察程序, 将/ scss中的文件转换为/ css, 并且不要忘记选中”保存时编译SASS文件”, 因为每次你对SASS文件进行更改时都会触发此操作:

在netbeans中编译更少的路径

在我们项目的根文件夹中, 有sass文件夹, 我们将在其中存储所有SASS文件。当你按CTRL + S或手动保存文件时, 它们将自动编译为CSS文件。现在, 你可以修改项目的源文件, 它们将自动构建到CSS中以供生产(请注意, 你也需要缩小这些文件以用于生产)。

编码愉快!

赞(0)
未经允许不得转载:srcmini » 如何在Windows中配置NetBeans以将SASS或SCSS文件自动编译为CSS

评论 抢沙发

评论前必须登录!