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.
You can use bower to install this set of plugins:
$ bower install --save requirejs-style-plugins
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;
}
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;
}
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;
}
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
Run the following:
$ grunt test:phantom
If you want to rerun tests on file changes, run the following instead:
$ grunt follow:phantom
- Code:
git clone git://github.com/unindented/requirejs-style-plugins.git
- Home: https://github.com/unindented/requirejs-style-plugins/
Daniel Perez Alvarez (unindented@gmail.com)
Copyright (c) 2014 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.