inline-css-webpack-loader

1.0.4 • Public • Published

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

Package Sidebar

Install

npm i inline-css-webpack-loader

Weekly Downloads

74

Version

1.0.4

License

MIT

Unpacked Size

7.45 kB

Total Files

5

Last publish

Collaborators

  • avrmav