README.md

npm run build

commented webpack.optimize.UglifyJsPlugin

build/static/app/css/styles.css

._1gwPWr77dmf4i5iRBt9FXY {
  border-color: #1abc9c !important; }

.DrIhMabgaalOg4mkpO6Q6 {
  border-color: #16a085 !important; }

._3_TLmw6hMAhtdZvapifPZ1 {
  border-color: #2ecc71 !important; }

/*# sourceMappingURL=styles.css.map*/%  

with webpack.optimize.UglifyJsPlugin

build/static/app/css/styles.css

.DrIhMabgaalOg4mkpO6Q6{border-color:#16a085!important}._3_TLmw6hMAhtdZvapifPZ1{border-color:#2ecc71!important}
/*# sourceMappingURL=styles.css.map*/%

npm modules

% npm ls --depth=0
[email protected] /home/user/test-webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

index.js

var style = require('./style.scss');

package.json

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rm -rf build/static && webpack --bail --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0"
  }
}

style.scss

$turquoise: #1abc9c;
$green-sea: #16a085;
$emerald: #2ecc71;


$colors: (
        turquoise: $turquoise,
        green-sea: $green-sea,
        emerald: $emerald,
);

@each $name, $color in $colors {
  .#{$name} {
    border-color: $color !important;
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    context: __dirname,
    devtool: 'source-map',
    entry: [
        './src/index.js',
    ],
    output: {
        path: path.join(__dirname, 'build', 'static', 'app'),
        filename: 'js/app.js',
        publicPath: '/static/app/',
        library: 'App',
    },
    plugins: [
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("css/styles.css"),
        //new webpack.optimize.UglifyJsPlugin({
        //    compressor: {
        //        screw_ie8: true,
        //        warnings: false,
        //    },
        //}),
    ],
    resolve: {
        extensions: ['', '.js'],
    },
    resolveLoader: {
        'fallback': path.join(path.dirname(__dirname), 'node_modules'),
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules!sass-loader"), // production
            },
        ],
    },
};