如何在Netbeans 8.0.1中使用SASS

问题描述 投票:26回答:2

我正在尝试在Netbeans 8.0.1中使用SASS。我根据ruby -v的反馈正确设置了Ruby和SASS。

我在Project \ Web Pages \ resources下设置了一个带有css和scss文件夹的Web应用程序。

我的输入和输出分别设置为/ scss和/ css,我检查了'保存时编译Sass文件'。我创建了一个styles.scss文件并添加了一些SASS / CSS。

当我保存styles.scss文件时,是否应该生成styles.css?保存或编译项目时没有任何反应。

有没有人遇到任何类似的问题或有关于如何调试此问题的建议?

提前致谢!

netbeans sass
2个回答
13
投票

是的,当您保存文件时,应该创建/更新css。我认为你输入/输出目录的映射是错误的。路径需要相对于站点根/ Web根目录。我不确定您的项目是什么(HTML5或PHP或Java Web或其他?),但如果您有Java Web项目,那么路径需要是

resources/scss -> resources/css

82
投票

Installing SASS on Windows10, Ruby2.2.3, Netbeans8

  1. 下载SASS for Windows - RubyInstaller.org
  2. 安装Ruby就像:

Installing SASS in Netbeans

  1. 搜索CMD(命令提示符)窗口并启动它。
  2. 使用bin访问Ruby的cd \Ruby\bin文件夹(点击回车)
  3. 使用命令gem install sass安装sass(按Enter键安装)

Installing SASS in Netbeans

  1. 等待安装完成

Installing SASS in Netbeans

  1. 在Netbeans开放 选项→工具→其他(v8.1 +中的HTML / JS)→CSS预处理器选项卡
  2. 输入已安装的sass.bat C:\Ruby\bin\sass.bat的路径,然后单击Install Sass。 应用/确定确认更改

Installing SASS in Netbeans

  1. 使用现有项目或创建新项目(HTML5,PHP,等等......)。 创建项目后,打开“项目”窗口。 右键单击您的项目,然后选择>属性。 从Project Properties弹出窗口中选择CSS Preprocessors。 选择“保存时编译SASS文件”。 (如果希望编译器自动最小化.css结果文件,请在编译器选项下使用--style compressed

Installing SASS in Netbeans

  1. 您可以从上图中看到编译器使用两个默认的Input(watchable)/ Output(编译的destionation)文件夹路径。 在项目中也创建scss文件夹(可选择css文件夹)。

Installing SASS in Netbeans

你完成了!

一旦你创建一个新的.scss文件或保存它,Netbeans将自动将文件编译为/css文件夹中的.css。

Installing SASS in Netbeans

© www.soinside.com 2019 - 2024. All rights reserved.