Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Powershell build - compiling SASS

I'm hoping to start using SASS in a Visual Studio 2010 project using Web Workbench - but the issue of version control through TFS has me stumped. To avoid overriding someone else's changes I understand that the outputted CSS should be excluded from source control, and that the SCSS should be compiled to CSS server side during the build process. Currently we use a Powershell script for the build, but I can't seem to find any information on how to incorporate SCSS compilation in Powershell. Is there any decent documentation out there on this process?

like image 416
jessikwa Avatar asked May 11 '15 14:05

jessikwa


People also ask

How do I compile SCSS to css in Windows?

css will compile a single file. node-sass input/folder -o output/folder will compile a entire folder. With the -w option you can watch a folder: node-sass -w input/folder -o output/folder will watch a folder and compile the files to theoutput folder.


1 Answers

I think my lack of experience with Powershell/build scripts in general had me overthinking this. I took the following steps:

1) Installed Ruby for Windows from here: https://www.ruby-lang.org/en/documentation/installation/

2) Open Command Prompt -> entered gem install ruby

3) Opened PowerGUI Script Editor (already installed, but can be downloaded here: http://software.dell.com/products/powergui-freeware/)

4) Created a function to execute the following: sass -t compressed "path\sassInput.scss" "path\sassOutput.css"

And presto. I do want to have a way of doing this for each .scss file in the directory that is not a partial, but this is enough to get me started for now.

UPDATE: This is what I ended up with for a Powershell script: (note $dirpath is set to my project's root directory elsewhere)

$stylesheetPath = $dirpath + "App_Themes\"
$files = Get-ChildItem $stylesheetPath -Filter *.scss 
for ($i=0; $i -lt $files.Count; $i++) {
    $file = $files[$i]
    $fileName = $file.BaseName
    $filePath = $file.FullName
    if (-not $fileName.StartsWith("_")) {
        $newFilePath =  "$stylesheetPath$fileName.css"
        sass -t compressed $filePath $newFilePath
    }
}
like image 164
jessikwa Avatar answered Nov 15 '22 23:11

jessikwa