babel-plugin-sass-export

SASS Export

Babel Plugin

Simple Babel plugin to parse SASS files and export your styles as a string.

We use this at Mudano with Fractal to help document our design library UI React.

Installation

NB: not yet published to NPM

$ yarn add babel-plugin-sass-export --dev

Usage

Create your React component as you usually would and import your SASS files.

import './my-sass.scss';

function Component() {
    return <div className="my-class">My Component</div>;
}

export default Component;

The plugin converts your SASS into a CSS string. The string is exported with your component for use as you see fit.

const style = '.my-class{background:red}';
export { style };

function Component() {
    return <div className="my-class">My Component</div>;
}

export default Component;

Issues

This plugin is not designed for production use.

Bundling your SASS with something like Webpack is likely a better choice.

Feel free to report issues or add comments.