Sass Module

Sass module is an extremely simple tool that works with Webpack to provide you with namespaced Sass for you components.

Inspired by the typestyle and react-inline-css

Example

Code:

import style from 'sass-module-lite'

const className = style(require('../path/to/YourStyle.scss'))

const TestComponent = () => (
    <div className={className}>
        <div className="aqua">Ayaka</div>
        <div className="ebony">Ayase</div>
        <div className="orange">Ayano</div>
    </div>
)

:root will be replaced at runtime with a generated unique ID.

:root {
    .aqua {
        background-color: aqua; 
    }
    .ebony {
        background-color: #555d50; 
    }   
    .orange {
        background-color: orange; 
    }
}

Webpack setup:

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss?$/,
                loader: 'raw-loader!sass-loader',
                exclude: /node_modules/,
            },
        ]
    },
};

Installation

yarn add sass-module-lite

License

© 2017 WTFPL – Do What the Fuck You Want to Public License.