React Sass/CSS Class Mapper

Features

• Allows to map custom CSS/SASS classes for CSS/SASS Modules with Webpack
• Preserves SASS/CSS classes that might be globally applied through other SASS/CSS files. EX: FontAwesome
• Easy to use

How to use with React

npm i --save react-scss-style-module

import React, {Component} from "react";
import ReactSCSS from 'react-scss-style-module';

import styles from './icon.module.css';

class Icon extends Component {

  constructor(props) {
    super(props);
    this.variant = ReactSCSS.bind(styles, {classes: props.variant});
  }

  render() {
    return (<span>
      <i className={this.variant}></i>
    </span>)
  }
}

export default Icon;

import React, {Component} from "react";
import Mapper from 'react-scss-style-module';

import styles from './icon.module.css';

class Icon extends Component {

  constructor(props) {
    super(props);
    this.variant = ReactSCSS.bind(styles, {defaults: "rounded-icon"});
  }

  render() {
    return (<span>
      <i className={this.variant}></i>
    </span>)
  }
}

export default Icon;

icon.module.css

.red {
  color: red;
}

App.js

import React, {Component} from 'react';

import Icon from '../icon';

class App extends Component {

  render() {
    return (
      <div><Icon variant="red fas fa-home"/></div>
    )
  }
}

export default App;

Rendered in browser

<i class="icon_red__m8-68 fas fa-home"></i>

import React, {Component} from 'react';

import Icon from '../icon';

class App extends Component {

  render() {
    return (
      <div><Icon/></div>
    )
  }
}

export default App;