Styled Components

Spinner.jsx

import * as React from 'react'
import { StyledComponent } from './StyledComponent'

function Spinner(props) {
  return (
		<div className={'w--spinner ' + props.customClass}>
			<div className="bounce1" />
			<div className="bounce2" />
			<div className="bounce3" />
		</div>
	)
}

export default StyledComponent(Spinner, require('path/to/file.css'))

StyledComponent.js

import * as React from 'react'

export function StyledComponent(ComponentClass, style) {
	return class Wrapper extends React.Component {
		componentWillMount() {
			style.use()
		}

		componentWillUnmount() {
			style.unuse()
		}

		render() {
			return React.createElement(ComponentClass, this.props)
		}
	}
}

webpack.config.js

const webpack = require('webpack')

const OUTPUT_PATH = path.join(__dirname, 'build');
const PUBLIC_PATH = process.env.STATIC_URL;

module.exports = {
    entry: 'index.tsx',
    output: {
        path: OUTPUT_PATH,
        filename: '[name].[hash].bundle.js',
        publicPath: PUBLIC_PATH,
    },
    watch: false,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/,
    },
    module: {
        rules: [
            {
                test: /\/pcss\/.*\.css$/,
                use: [
                    'style-loader/useable',
                    'css-loader',
                    'postcss-loader',
                ],
            },
            {
                test: /\.tsx?$/,
                use: [
                    'ts-loader',
                ]
            },
        ]
    },
    resolve: {
        modules: ['node_modules'],
        extensions: [
            '.ts',
            '.tsx',
            '.css',
        ]
    }
}