Plugin: Node-Sass v1.0

Browse, download and discuss plugins for Blumentals code editors

Plugin: Node-Sass v1.0

Postby pmk65 » Sun Apr 17, 2016 7:50 pm

WeBuilder Plugin: Node-Sass v1.0

Integrate Node-Sass into Webuilder. So now you can compile SASS files directly from within the editor.

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed. <https://github.com/sass/node-sass>
Requires nodejs. <https://nodejs.org/>

Image

Usage:
The plugin can run in 2 different modes: Manual or automatic. (Can be changed through the plugin options)
- Default mode will automatically compile your .scss files when saving.
- Manual mode adds a menu item you can activate manually when you want the document compiled.

All node-sass options can be controlled by the settings menuitem.

Installation:
1) Download plugin .ZIP file.
2) Open WeBuilder and select "Plugins -> Manage Plugins" from the menu.
3) Click "Install" and select the .ZIP file you downloaded in step 1.
4) Download and install node.js if you haven't done so already. <https://nodejs.org/en/download/>
5) Open a DOS prompt and type (without quotes): "npm install node-sass -g"
This will install the node-sass module needed for compiling the SASS files.
Attachments
Node-Sass.zip
(7.85 KiB) Downloaded 748 times
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Plugin: Node-Sass v1.0

Postby thwbn » Tue May 10, 2016 9:01 pm

this guy deserved a beer - at minimum!!!
thwbn
 
Posts: 15
Joined: Sun Mar 06, 2016 5:26 pm

Re: Plugin: Node-Sass v1.0

Postby Klipper » Wed Nov 29, 2017 2:09 am

I'm new to sass and node.js, and want to use this Node-Sass plugin for compiling my .scss files.
I installed Node.js (8.9.1 LTS) and installed node-sass using "npm install node-sass -g" successfully.
I installed this Node-Sass plugin configured it for auto-compiling.
I edited the settings. The output path should be relative to the directory containing the source, so I added '..\css2' as output-path. This css2 directory is on same level as scss2 directory containing the .scss sourcefiles.

So it looks everything has been set up correct. Alas, now at every save action of my template.scss file I get the error message in WeBuilder Message pane:
An output directory must be specified when compiling a directory.
I tried different types of paths in setting screen, even absolute paths, but without success and still same errormessage.(I tried i.e. using the relative path with ../ instead of ..\)

Question: What I'm doing wrong? Or is this version of the plugin Node-Sass v1.0 not compatible with latest Node.js and/or node-sass?

Also can you explain a bit more what is meant with the last three settings:
'Path to look for imported files'
'Path to .js file containing custom importer'
'Path to js. file containing custom functions'

Thanks in advance!
User avatar
Klipper
 
Posts: 13
Joined: Fri Jun 17, 2011 3:18 pm

Re: Plugin: Node-Sass v1.0

Postby pmk65 » Wed Nov 29, 2017 3:55 pm

Hi Klipper.

I have 2 folders named "css" and "scss". Both are located in the same root folder.
The paths looks like this:

root/css
root/scss

In the WeBuilder "Node Sass Settings" I have set the output paths to:

../css/

Then when I save a .scss file to the scss folder, a .css file (or more) will be created in the "css" folder.
You can also try leaving the output paths empty. Then it will save the .css files in the same path as the .scss file.

As for the 3 last options, I really don't know what they are used for. :?
The documentation at https://github.com/sass/node-sass doesn't give much explanation to those 3.
(I just made support for all options when I made the plugin)
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark


Return to Plugins for HTMLPad / Rapid CSS / Rapid PHP / WeBuilder

Who is online

Users browsing this forum: No registered users and 1 guest