requirejs-style-plugins

    0.0.2 • Public • Published

    RequireJS Style Plugins Build Status Dependency Status

    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

    Contributors

    Daniel Perez Alvarez (unindented@gmail.com)

    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.

    Keywords

    none

    Install

    npm i requirejs-style-plugins

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • unindented