RequireJS Style Plugins

Small set of plugins for RequireJS that deal with CSS and preprocessors such as Less or Sass.

For more plugins please check the RequireJS wiki.

Installing

You can use bower to install this set of plugins:

$ bower install --save requirejs-style-plugins

Loading a CSS stylesheet

To use CSS stylesheets in your app, your configuration should look like this:

require.config({
  map: {
    '*': {
      css: 'bower_components/requirejs-style-plugins/css'
    }
  }
});

Then you would load the stylesheet in your view like this:

define(function (require) {
  require('css!views/button');
 
  var Backbone = require('backbone');
 
  return Backbone.View.extend({
    tagName: 'button'
  });
});

Which would try to load views/button.css:

button {
  color: red;
}

Loading a Less stylesheet

To use Less stylesheets, your configuration should look like this:

require.config({
  map: {
    '*': {
      less: 'bower_components/requirejs-style-plugins/less'
    }
  }
});

Then you would load the stylesheet in your view like this:

define(function (require) {
  require('less!views/button');
 
  var Backbone = require('backbone');
 
  return Backbone.View.extend({
    tagName: 'button'
  });
});

Which would try to load views/button.less:

@color: green;
 
button {
  color: @color;
}

Loading a Sass stylesheet

To use Sass stylesheets, your configuration should look like this:

require.config({
  map: {
    '*': {
      sass: 'bower_components/requirejs-style-plugins/sass'
    }
  }
});

Then you would load the stylesheet in your view like this:

define(function (require) {
  require('sass!views/button');
 
  var Backbone = require('backbone');
 
  return Backbone.View.extend({
    tagName: 'button'
  });
});

Which would try to load views/button.sass:

$color: blue;
 
button {
  color: $color;
}

Testing

Browser

Run the following:

$ grunt test:browser

And open http://localhost:8000/ in your browser.

If you want to rerun tests on file changes, run the following instead:

$ grunt follow:browser

PhantomJS

Run the following:

$ grunt test:phantom

If you want to rerun tests on file changes, run the following instead:

$ grunt follow:phantom

Meta

• Code: git clone git://github.com/unindented/requirejs-style-plugins.git
• Home: http://github.com/unindented/requirejs-style-plugins/

Contributors

Daniel Perez Alvarez ([e-mail])

License

Copyright (c) 2014 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.