https://github.com/avraammavridis/inline-css-webpack-loader

Inline css/sass/scss webpack loader
https://github.com/avraammavridis/inline-css-webpack-loader

css loader react sass scss webpack webpack-loader webpack2

Last synced: 2 days ago
JSON representation

Inline css/sass/scss webpack loader

• Host: GitHub
• URL: https://github.com/avraammavridis/inline-css-webpack-loader
• Owner: AvraamMavridis
• Created: 2016-05-02T04:29:56.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-10-18T08:38:24.000Z (almost 2 years ago)
• Last Synced: 2024-09-23T20:03:51.250Z (3 days ago)
• Topics: css, loader, react, sass, scss, webpack, webpack-loader, webpack2
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 12
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# inline-css-webpack-loader

[![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()

[![semantic-versioning](https://img.shields.io/badge/semantic%20-versioning-green.svg)]()

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](https://nodei.co/npm/inline-css-webpack-loader.png?mini=true)](https://nodei.co/npm/inline-css-webpack-loader/)

Webpack config:

```js

  ...

	{

		test: /\.scss$/,

		loader: 'inline-css-webpack-loader'

	},

	...

```

##Example

e.g.

```scss

// 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

```js

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 (

               Click me

            )

  }

}

```

##Contributing

Feel free to open issues, make suggestions or send PRs.

This project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/). By participating, you are expected to uphold this code.

##Contact

Twitter: [@avraamakis](https://twitter.com/avraamakis)

##License

MIT