Style loader

ExampleComponent.js

import React, {PropTypes} from 'react';
import ProductCard from '../../molecule/product-card';
import PromoCode from '../../atom/promo-code';
import PaymentForm from '../../molecule/payment-form';

import style from './style.css';

const Cart = ({
        productCardProps,
        promoCodeProps,
        paymentFormProps,
        backUrl,
        backTitle,
        title
    }) => (
      <div className={style.parent}>
        <div className={style.titleContainer}>
          <div className={style.headerTitle}>{title}</div>
        </div>
        <div className={style.cart}>
          <div className={style.productBlock}>
            <ProductCard {...productCardProps} />
            <PromoCode {...promoCodeProps} />
          </div>
          <div className={style.paymentBlock}>
            <PaymentForm {...paymentFormProps} />
            <a
              className={style.backButton}
              href={backUrl}
            >{backTitle}</a>
          </div>
        </div>
      </div>
);

Cart.PropTypes = {
  productCardProps: ProductCard.PropTypes,
  promoCodeProps: PromoCode.PropTypes,
  paymentFormProps: PaymentForm.PropTypes,
  backUrl: PropTypes.string,
  backTitle: PropTypes.string,
  title: PropTypes.string
};

export default Cart;

style.css

@value colors: "../../variables/colors.css";
@value light from colors;
@value blueGrey from colors;

@value breakpoints: "../../variables/breakpoints.css";
@value mobile from breakpoints;

.parent {
    background-color: light;
    height: 100vh;
}

.cart {
    width: 90%;
    max-width: 1175px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.productBlock {
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
}

.paymentBlock {
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
}

.titleContainer {
    height: 103px;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.headerTitle {
    font-size: 40px;
    color: darkGrey;
}

@media mobile {
  .cart {
    width: 100%;
  }

  .productBlock {
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }

  .paymentBlock {
    max-width: 100%;
    width: 100%;
  }

  .titleContainer {
    height: 46px;
    margin-bottom: 0;
  }

  .headerTitle {
    font-size: 15px;
  }
}

.backButton {
  border: none;
  text-align: center;
  margin: 10px 5px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  background: #ECEFF1;
  color: blueGrey;
  cursor: pointer;
}

.backButton:hover {
  background: #C0CAD1;
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const BabiliPlugin = require('babili-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const CSSWrapper = require('@coorpacademy/css-wrapper-webpack-plugin');

const hash = '[folder]__[local]';
const componentCSS = new ExtractTextPlugin({
  filename: 'bundle.css',
  ignoreOrder: true
});

const NODE_ENV = process.env.NODE_ENV || 'development';

const config = cssScope => ({
  devtool: NODE_ENV === 'production' ? false : 'eval',

  stats: {
    children: false,
    chunks: false, // Makes the build much quieter
    colors: true
  },

  output: {
    library: 'Coorponents',
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    libraryTarget: 'umd'
  },

  module: {
    rules: [{
      test: /\.(ttf|otf|eot|svg|woff)$/,
      loader: 'file-loader'
    },
      (NODE_ENV === 'production') ? {
        test: /\.css$/,
        loader: componentCSS.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              minimize: true,
              modules: true,
              importLoaders: 1,
              localIdentName: `${hash}`
            }
          }, {
            loader: 'postcss-loader'
          }]
        })
      } : {
        test: /\.css$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            minimize: true,
            modules: true,
            importLoaders: 1,
            localIdentName: `${hash}`
          }
        }, {
          loader: 'postcss-loader'
        }]
      }
    ]
  },

  plugins: (() => {
    const plugins = [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(NODE_ENV)
        }
      })
    ];

    if (NODE_ENV === 'production')
      plugins.push(
        new CompressionPlugin({
          asset: '[path].gz',
          algorithm: 'gzip',
          regExp: /\.js$|\.css$/,
          threshold: 10240,
          minRatio: 0.8
        }),
        new webpack.LoaderOptionsPlugin({
          options: {
            context: __dirname
          },
          minimize: true,
          debug: false
        }),
        new BabiliPlugin({
          comments: false,
          sourceMap: false,
          simplify: false
        }),
        componentCSS
      );

    if (cssScope) {
      plugins.push(
        new CSSWrapper('bundle.css', cssScope)
      );
    }

    return plugins;
  })()
});

module.exports = config;