inline-css-webpack-loader

Load Sass/Css file and use them as inline css

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
inline-css-webpack-loader
1.0.46 years ago8 years agoMinified + gzip package size for inline-css-webpack-loader in KB

Readme

inline-css-webpack-loader
CocoaPods() semantic-versioning()
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

NPM
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