Sitefinity 8, Feather, SASS, Bundling, and Resource Packages
Hello,
I'm tasked with porting a SASS based site over to Sitefinity 8. I'm wanting to use Pure MVC templates and utilize Project Feather to achieve this. Of course, I'd also like to utilize Visual Studio 2013's bundling capabilities so everything works nicely upon compiling the site.
All of these items are new to me so apologies ahead of time. My Resource Package is setup like this:
~/ResourcePackages/MyResourcePackage/
~/ResourcePackages/MyResourcePackage/assets/src/images/*
~/ResourcePackages/MyResourcePackage/assets/src/js/*
~/ResourcePackages/MyResourcePackage/assets/src/sass/*
~/ResourcePackages/MyResourcePackage/Views/Layouts/default.cshtml
Within my default.cshtml file I'm reference assets like this (this is the path of the compiled css file after I get this working hopefully):
@Url.WidgetContent("~/ResourcePackages/MyResourcePackage/assets/dist/css/style.css")
How can I setup my Sitefinity 8 Visual Studio 2013 solution to accomplish this? I'd like to do the same thing for javascript files as well (src contains the development versions and dist contains the combined, minified versions). Right now I have the compiled css files in dist so I can at least test the site.
Any help would be greatly appreciated!
Thanks!
Welp, I think I have a pretty solid solution to my Sitefinity build. It took awhile but found some great links and thought I'd share what I did incase someone else is looking around for an approach to use (definitely not the only way to do this).
First, if you're new to Sass, this is a great basic guide to help you out:
Second, this is a solid guide on getting css files compiled from scss files:
I ended up using the Mindscape Web Workbench extension. Though I have noticed Visual Studio crawwwwwwwls when you're working with scss files. So while it works, you may be more efficient by editing your scss files through a separate editor and just save them in Visual Studio so they compile down to css files.
If you're not big on using Mindscape Web Workbench then you may have luck using Web Essentials 2013 for Update 2. It never worked for me in Visual Studio 2013, I kept getting an error about not finding files when it was trying to compile the scss files. I tried setting the option to use Ruby as the services that compiles the scss files but that still didn't know. Pasting this SO article here for others that may have success with it.
stackoverflow.com/.../how-to-use-sass-in-visual-studio-2013
Lastly, this article describes bundling and minification support in Visual Studio 2013:
www.asp.net/.../bundling-and-minification
Using this I was able to minify and bundle the css files that were compiled from scss files during the project compilation.
Here's my project directory setup:
~/ResourcePackages/MyResourcePackage/
~/ResourcePackages/MyResourcePackage/assets/sass/*.scss
~/ResourcePackages/MyResourcePackage/assets/sass/*.css (compiled from scss files)
~/ResourcePackages/MyResourcePackage/assets/js/*.js (full javascript files here)
And with the bundling configuration I set the following virtual paths for styles and javascript (setup within my ~/App_Start/BundleConfig.cs file which is registered in the ~/Global.asax.cs file I had to create):
~/ResourcePackages/MyResourcePackage/assets/stylesBundle
~/ResourcePackages/MyResourcePackage/assets/scriptsBundle
And within the default.cshtml layout I am able to reference them like this:
<link href="@Url.WidgetContent("~/ResourcePackages/MyResourcePackage/assets/stylesBundle")" media="screen" rel="stylesheet" type="text/css" />
<script src="@Url.WidgetContent("~/ResourcePackages/MyResourcePackage/assets/scriptsBundle")" type="text/javascript"></script>
Hopefully this helps people that come to this post wondering how to implement some features into Sitefinity.
Hi Mike,
Great resources and thanks. I'm down a path of Sitefinity 8 and looking to use feather rather than the stock system. Seems like the right way to go.
I'm finding some challenges getting things setup (there's a bit of a magic to have your custom widgets in a separate dll while referencing the right versions of both sitefinity and feather) so I'll probably put a blog post together on this.
I'm not going down the SASS route like you are but rather a bootstrap one with MVC and some custom templates and widgets, but the setup is similar.
I haven't found a lot of people here using Sitefinity 8 and MVC in this sort of way (or at least nobody wants to admit it) so would be great to hook up and exchange notes if you want.
Thanks
Absolutely, looking forward to seeing your blog post. Anytime you wanna exchange notes let me know.
For SASS compilation I've never used anything but Web Essentials and have never had performance problems with it. I have noticed WE crashes a lot if you have a syntax error anywhere in your SCSS, and then you have to manually restart the WE node.js server. I'm just getting my hands on Sitefinity 8 and Project Feather after having come from doing straight up MVC development, so I'm excited to see how many pain points I run into.
These two WE bug reports might help you track down your problem: