mattvagni

._6de768fc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

._8e1229bd {
  color: red; }
  ._8e1229bd :hover {
    color: green; }

mattvagni

const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        autoprefixer({
            browsers: [
                'last 2 versions',
                'IE >= 9',
                'safari >= 8'
            ]

mattvagni

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
        loader: [
            {
                loader: 'css-loader',
                query: {
                    localIdentName: '[hash:8]',
                    modules: true
                }

mattvagni

'use strict';

var _styles = {
    'wrapper': '_6de768fc',
    'button': '_8e1229bd'
};

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

mattvagni

{
    "presets": [
        ["es2015"]
    ],
    "env": {
        "server": {
            "plugins": [
                [
                    "css-modules-transform", {
                        "preprocessCss": "./loaders/sass-loader.js",

mattvagni

._6de768fc {
  display: flex; }

._8e1229bd {
  color: red; }
  ._8e1229bd :hover {
    color: green; }

mattvagni

import styles from './styles.scss';

console.log(
    `
    <div class="${styles.wrapper}">
        <button class="${styles.button}">
            Click Me
        </button>
    </div>
    `

mattvagni

.wrapper {
    display: flex;
}

.button {
    color: red;

    & :hover {
        color: green;
    }

mattvagni

'use strict';

var _styles = {
    'wrapper': 'fe15fdc7',
    'button': 'ad030139'
};

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

mattvagni

  "scripts": {
    "build:client": "webpack --config webpack.config.js",
    "build:server": "BABEL_ENV=server babel src --out-dir ./build/server"
  }