Azure Websites and Sass

Question

I have been trying to find if there is a way to support sass with a windows azure website? Can someone point me to some documentation or let me now if this is even possible. I am specifically looking to support Zurb Foundation responsive framework which is built on sass(scss).

I already do this by using the complied css files with an override css file. I would like to use the semantic styling of sass if possible.

Thanks

Answer 1

Yes. But there are a few hoops because of Sass/SCSS.

By default, Foundation uses Compass for its SCSS compilation. However, Sass and Compass are both written in Ruby, which Azure WebSites does not support. (Azure WebSites currently supports .NET, Node.js, PHP, and Python .) Running compass from the command line compiles your SCSS into the CSS needed by your browser and referenced in your HTML; this CSS (really, the entire Stylesheet directory) is not committed into Git.

If you want to manually deploy your application into Azure WebSites, then just run Compass before hand, and then push up your files, including the generated stylesheet/ directory. However, I'm assuming you want to run through Git Deployment.

Because Azure WebSites does not support Ruby, that means we need to have an entirely Ruby-free option. Fortunately, Foundation already supports this using the LibSass library. When you create your new Foundation project, use the --libsass flag.

foundation new PROJECT_NAME --libsass

Instead of running compass watch to monitor and compile your SCSS files, this uses Node.js and GruntJS. Execute grunt from the command line to monitor and compile your SCSS. (Watch and Build are the default tasks for Foundation's Grunt setup, so you don't need to specify the task name.)

From there, you can use the Azure CLI and Kudu to configure your Azure Git Deployment to execute Grunt to compile your SCSS as a part of your deployment.

Install the Azure CLI

npm install -g azure-cli

Then start with a Node.js Deployment (which powers Grunt).

azure site deploymentscript --node

You will need to modify your deployment script ( deploy.sh ) that the Azure CLI generates so that it will execute Grunt on deploy. In deploy.sh , there is a # Deployment section. Replace the entire section with the following:

# Deployment
# ----------

echo Handling node.js grunt deployment.

# 1. Select node version
selectNodeVersion

# 2. KuduSync to wwwroot
"$KUDU_SYNC_CMD" -v 500 -f "$DEPLOYMENT_SOURCE" -t "$DEPLOYMENT_TARGET" -n "$NEXT_MANIFEST_PATH" -p "$PREVIOUS_MANIFEST_PATH" -i ".git;.deployment;deploy.sh;README.md;"
exitWithMessageOnError "Kudu Sync to Target failed"

# 3. Install npm packages
if [ -e "$DEPLOYMENT_TARGET/package.json" ]; then
  eval $NPM_CMD install
  exitWithMessageOnError "npm failed"
fi

# 4. Install bower packages
if [ -e "$DEPLOYMENT_TARGET/bower.json" ]; then
  eval $NPM_CMD install bower
  exitWithMessageOnError "installing bower failed"
  ./node_modules/.bin/bower install
  exitWithMessageOnError "bower failed"
fi

# 5. Run grunt
if [ -e "$DEPLOYMENT_TARGET/Gruntfile.js" ]; then
  eval $NPM_CMD install grunt-cli
  exitWithMessageOnError "installing grunt failed"
  ./node_modules/.bin/grunt --no-color build
  exitWithMessageOnError "grunt failed"
fi

This will (1) install all of the npm packages you need (like node-libsass ), install all of the bower packages you need (like foundation ), and run grunt build to compile your SCSS.

One caveat

Azure WebSites also doesn't support compiling Node.js packages. It will run the package, but it won't compile them, so they will need to be precompiled and then committed into Git. This means that ./node_modules/node-sass/** will need to be committed into Git. Also: since modules will compile differently on OSX vs. Windows, this means that you need to commit node-sass from a Windows machine so that a Windows-compiled version of the module is in Git.

Unfortunately, this will cause problems if you try and run this project from an OSX development machine.

All problems that don't exist under LESS. Since LESS originated in the JavaScript community rather than the Ruby community, its primary interpreters are in JavaScript and natively supported by Node.js (and thus Azure WebSites). These JavaScript interpreters also do not need to be compiled, so they don't need their node_modules committed. But since Foundation uses Sass, these are the hoops you have to jump through.

Not that LESS doesn't have its own issues, just different ones, and not these.