Managing Css Files in Durandal 2.0

Durandal does not have a mechanism to manage css file for each view. So I have created a plugin to manage css files.

The plugin is as below. I have placed this plugin under durandal/plugins folder

define(['jquery'], function ($) {
 return {
    loadCss : function (fileName) {
	var cssTag = document.createElement("link")
	cssTag.setAttribute("rel", "stylesheet")
	cssTag.setAttribute("type", "text/css")
	cssTag.setAttribute("href", fileName)
	cssTag.setAttribute("class", "__dynamicCss")

	removeModuleCss: function () {


In the viewmodel, I have used is as below.

define(['plugins/cssLoader'], function (cssLoader) {
  var ctor = function () {
	this.compositionComplete = function () {
    this.deactivate =  function () {

  return ctor;

1 comment

Anonymous said...

Thanks for this.
An acceptable workaround in some cases.
The only thing I'd change - I'd load CSS from Activate, not CompositionComplete.
This will lower glitch on a transition between views.

Powered by Blogger.