inline-css-webpack-loader

Convert scss, sass, css files to React friendly objects that you can use to inline styles to your components (so you can easier distribute them)

##Install

Webpack config:

  ...
	{
		test: /\.scss$/,
		loader: 'inline-css-webpack-loader'
	},
	...

##Example

e.g.

// button.scss 
.something
{
  color : red;
  background-color: blue;

  &:hover
  {
    color: blue;
  }

  .somethingElse
  {
    color:green;
  }

  &:nth-child(2)
  {
    text-align: center;
    font-size: 12px;
    font-style: italic;
  }
}

Will generate the following object

import React, { Component } from 'react';

import * as cssMap from './button.scss';


/*
cssMap.something = {
  backgroundColor: "blue",
  color:"red"
};

cssMap.something__somethingElse = { 
  color: "green"
};

cssMap.something_hover = { 
  color: "blue"
};

cssMap.something_nth_child_2 = { 
   textAlign: "center",
   fontSize: "12px",
   fontStyle: "italic"
}

*/


export default class Button extends Proto
{

  render() {

    return (<button style={ cssMap.something }>
               Click me
            </button>)
  }
}

##Contributing Feel free to open issues, make suggestions or send PRs. This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code.

##Contact

Twitter: @avraamakis

##License MIT