Code Monkey home page Code Monkey logo

aurora-sass-loader's Introduction

Aurora Sass Styles Loader

A helper function/module for loading universal/isomorphic styles in Aurora

Usage

You need to have this webpack setup

{
  test: /\.scss$/,
  loader: !isProduction ? 'style!css!autoprefixer!sass' : 'css!autoprefixer!sass'
}

Meaning: You only use the style-loader in production mode (with server-side rendering) and omit it in development mode

You use the styles in your components like this

// Component.jsx

/**
 * This is where you load the styles
 */
const styles = require('aurora-sass-loader')(__dirname + '../styles/my-component-styles.scss');

/**
 * This is a required helper to inject styles
 * that we're 'borrowing' from webpack style-loader
 */
const injectStyles = require('style-loader/addStyles');

const AwesomeModule = React.createClass({
  /**
   * You have to implement this
   * static method so that Aurora
   * can pull the component styles
   * and include it for dynamic
   * server-side rendering
   */
  statics: {
    getStyles() {
      return styles;
    }
  },

  /**
   * This is the code used for
   * dynamically injection styles
   * when the page is loaded on
   * the client
   */
  componentWillMount() {
    if (isBrowser && !__DEVELOPMENT__) {
      injectStyles(styles);
    }
  },

  render() {
    // ....
  }
});

aurora-sass-loader's People

Contributors

eiriklv avatar misund avatar sindresvendby avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

eiriklv

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.