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