title: How to minimize my css files using webpack
body: <p>i'm using webpack and would like to minimize css file. At this time it is 2.25MB. I found this optimize-css-assets-webpack-plugin plugin but it din't help and my css file is same size. Here is my settings</p>
  
  <pre><code>'use strict';    
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  const webpackCommon = require('./webpack-common.config');
  var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  
  module.exports = merge(webpackCommon, {
     devtool: 'none',
     plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
           /\.js$/,
           beautify: false,
           comments: false,
           compress: {
              unused: true,
              dead_code: true,
              warnings: false,
              screw_ie8: true
           }
        }),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('production'),
           '__DEV__': false
        }),
        new webpack.optimize.CommonsChunkPlugin({
           minChunks: 2,
           maxChunks: 15,
           minChunkSize: 10000,
           name: 'vendor'
        }),
        new OptimizeCssAssetsPlugin({
           assetNameRegExp: /\.scss$/g,
           cssProcessor: require('cssnano'),
           cssProcessorOptions: { discardComments: { removeAll: true } },
           canPrint: true
        })
     ]
  });
  </code></pre>
  
  <p>this is prod config and it requires common config file. Here it is</p>
  
  <pre><code>'use strict';
  
  const path = require('path')
  const webpack = require('webpack')
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = {
     entry: {
        main: './src/main.js',
     },
     output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../../PashaGraph/WebClient/public')
     },
     watch: true,
     watchOptions: {
        aggregateTimeout: 100
     },
     plugins: [
        new ExtractTextPlugin("[name].css")
     ],
     module: {
        loaders: [
           {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel'
           },
           {
              test: /\.scss$/,
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
           },
           {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract('style', 'css-loader?minimize!sourceMap')
           },
           {
              test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
              exclude: /node_modules/,
              loader: 'url-loader'
           }
        ]
     },
     resolve: {
        extensions: ['', '.js', '.jsx']
     }
  };
  </code></pre>
  
  <p>as u see i use sass in my app. Maybe this is a reason why it doesn't reduce size.</p>
  
  <p>Solved! actually i have fonts and they were converted and embedded into css file. Thats why it was such big event with compression (2.25mb). 
  By the way i found this solution to restrict maximal size for embedding </p>
  
  <pre><code>{
              test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
              exclude: /node_modules/,
              loader: "url-loader?limit=60&amp;name=fonts/[name]_[hash].[ext]"
           }
  </code></pre>