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: 8 months 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 (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-10-18T08:38:24.000Z (over 3 years ago)
- Last Synced: 2025-02-01T08:06:19.467Z (over 1 year 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
[]()
[]()
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
[](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