How to use SASS with Netbeans 8.0.1

Question

I'm trying to use SASS in Netbeans 8.0.1. I have Ruby and SASS set up correctly based upon the feedback from ruby -v.

I have a web application set up with css and scss folders under Project\Web Pages\resources.

My input and output are set to /scss and /css respectively and I have checked 'Compile Sass File on Save'. I have created a styles.scss file and added some SASS/CSS.

When I save the styles.scss file, is it supposed to generate a styles.css? Nothing happens when I save or compile the project.

Has anyone run into any similar problems or have suggestions on how to debug this problem?

Thanks in advance!

Biel

Editing the bat file helped me get NetBeans to compile SCSS: https://mcmap.net/q/470311/-sass-output-error-in-netbeans-8-2 – Impudent

Answer 1

Yes, when you save the file, the css should be created/updated. I think you have wrong mapping for the input/output directories. The paths need to be relative to site root/web root. I don't know for sure what your project is (HTML5 or PHP or Java Web or other?), but if you have Java Web project, then the paths need to be

resources/scss -> resources/css

Adrianople

Thanks ladar, yep it is a Java Web project. Changing the paths to the ones you listed worked for me. – Biel

Finally found the answer here, and configured it correctly. Thanks – Chestonchest

Answer 2

Installing SASS on Windows10, Ruby2.2.3, Netbeans8

1. Download SASS for Windows - RubyInstaller.org
2. Install Ruby like:

3. Search windows for CMD (Command Prompt) and start it.
4. Access Ruby's bin folder using cd \Ruby\bin (Hit Enter)
5. Install sass using the command gem install sass (Hit Enter to install)

6. Wait for the installation to finish

7. In Netbeans open
   Options → Tools → Miscellaneous (HTML/JS in v8.1+) → CSS Preprocessors tab
8. Enter the path to the installed sass.bat C:\Ruby\bin\sass.bat than click Install Sass.
   Confirm your changes with Apply / OK

9. Use an existing one or Create a New Project (HTML5, PHP, whatever...).
   After the project is created open the Projects window.
   Right-Click your project and choose > Properties.
   From the Project Properties popup select CSS Preprocessors.
   Select the Compile SASS Files on Save.
   (If you want the compiler to automatically minimize your .css result file, use --style compressed under the Compiler Options)

10. You can see from the image above that the compiler uses two default Input(watchable)/Output(compiled destionation) folders paths.
    Create the scss folder (an optionally the css folder) in your project as well.

You're done!

As soon you create a new .scss file or you save it Netbeans will automatically compile the file to .css in the /css folder.

Bailor

Thank you, I used this tutorial/guide to set up SASS with Netbeans in the first place. One small note: in Netbeans 8.1, the "CSS Preprocessors" tab (in Step 8) is under the category "HTML/JS" and not under "Miscellaneous". – Fimbria

This answer was so helpful, I followed every step & it worked. Thanks @Roko C. Buljan. – Toed

really a great help in setting up – Yettie

And how do you install sass without internet access? – Foreordination

@Noneatme Hope this helps: help.rubygems.org/kb/rubygems/installing-gems-with-no-network – Bailor

Answer 3

Salam guys, the below image form my (Command Prompt with Ruby) says that: "Ruby Sass has reached end-of-life and should no longer be used"

Dower

I recommend using -Visual Studio Code-....It's free! and you can install -Sass Compiler- very easily as an extension. Enjoy. – Dower

Answer 4

For modern SASS and Netbeans we can just use https://github.com/sass/dart-sass/releases/tag/1.56.1 and install it in our PATH.

The release has the sass.bat file we need (as Roko C. Buljan pointed in his tutorial for Ruby).

There's not need to install Ruby and any other environment.

I applied this on Netbeans 15

Hargis