Using Zurb Foundation Sites with Sass in Visual Studio 2015

I'm currently involved in a project where we decided to use Zurb Foundation and since it's built with Sass we should be able to customise it to our needs.

Unfortunately we're stuck with Visual Studio 2015 and Asp.Net 4 + MVC 5 so we don't have the luxury of having NPM or Bower built in as in Asp.Net 5 + MVC 6. Yes, there are NuGet packages for Foundation but they're ancient.

This part of the process is not optimal but I downloaded the latest version of Foundation separately using the following NPM command:

npm install foundation-sites

I then took all the contents and added to my project.

Folder structure

To be able to compile Sass into Css right within Visual Studio we need to install the extension Web Compiler.

The next step was to create our main Sass file which I named site.scss. I put in a folder called SCSS. To have Web Compiler compile this, just right-click and choose Web Compiler -> Compile File.

Compile file

In site.scss we can then just import Foundation Sites to include it in our compiled Css.

Include Foundation

Here comes one tricky part and that is to tell Web Compiler about the whereabouts of Foundation. This can be done in the configuration file compilerconfig.json.defaults that gets created in the root of your project when you choose to compile a file with Web Compiler.
Find the node under "sass" that's called "includePath" and give it a value of "./Static/Framework/Foundation-sites/scss".

Now you should be good to go and whenever site.scss gets saved a site.css including Foundation should be compiled.

For easier debugging using browser developer tools you could get Source Maps working by enabling Source Maps in compileconfig.json that is located within the root of your project.

Source map setting

Please note! While the last step enables Source maps in the compiled Css, the path to them is incorrect. This could be solved in the configuration file compileconfig.json.defaults.
Find the node under "sass" that's called "soruceMapRoot" (yes it's misspelled) and change it to "/".

Adding alternative NuGet package source in Visual Studio solution

While it's possible to add a new package source to Visual Studio this is not optimal if there are more than one developer or if a build server is used.

An alternative is to add a .nuget folder and within that folder add a NuGet.config file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <packageSources>
      <add key="NuGet official package source" value="https://nuget.org/api/v2/" />
      <add key="Some other package source" value="some url to the other package source" />
   </packageSources>
   <disabledPackageSources />
   <activePackageSource>
      <!-- this tells that all of them are active -->
      <add key="All" value="(Aggregate source)" />
   </activePackageSource>
</configuration>

Source
https://docs.nuget.org/consume/nuget-config-file

Prevent packages folder from being added to Team Foundation Version Control in Visual Studio 2015

Solutions built with Visual Studio 2015 uses NuGet Automatic Package Restore instead of MSBuild-integrated package restore. At least for me this made Visual Studio want to check in the package folder into Team Foundation Version Control.

To prevent the packages folder from being added to Team Foundation Version Control in Visual Studio 2015 you can add a .nuget folder in your solution folder. In the .nuget folder add a file named NuGet.config with the following content:

<?xml version="1.0" encoding="utf-8"?>

<configuration>

  <solution>

    <add key="disableSourceControlIntegration" value="true" />

  </solution>

</configuration>

This tells Nuget to not even call Visual Studio about the changes to the packages folder.

For TFS 2012 and later also add a .tfignore file in your solution folder with the following content:

## Ignore the NuGet packages folder in the root of the repository

packages

#include package target files which may be required for msbuild

!packages/*.targets

This will ignore changes to the packages folder.

Sources

https://docs.nuget.org/consume/package-restore

http://docs.nuget.org/consume/package-restore/migrating-to-automatic-package-restore