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

本文概述

• 要求
• 1.访问配置
• 2.配置SASS可执行路径
• 3.配置SASS文件夹以编译和输出路径

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选项, 因此通过右键单击项目来打开属性对话框：

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

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

2.配置SASS可执行路径

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

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

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

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

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

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

编码愉快！