Trying to use css-loader with webpack to minimize our css
<p>I've tried to go through a dozen or so different searches and read the docs on css-loader but I believe they aren't up to date.</p>

<p>I'm also trying to learn our react code and conventions coming from front end javascript / jquery so this is new for me.</p>

<p>What I want to do is take our css and minimize it using css-loader but I don't know how to do this from what I've read.</p>

<p>A piece of our current code looks like this - prod.config.js :</p>

<pre><code>import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import PurifyCSSPlugin from 'purifycss-webpack-plugin';

import baseConfig from './base.config';

const PUBLIC_PATH = '//d1yepz0pwej23y.cloudfront.net/assets/' + process.env.TRAVIS_BUILD_NUMBER + '/';

export default {
  ...baseConfig,
  output: {...baseConfig.output, publicPath: PUBLIC_PATH },
  module: {
      loaders: [
    ...baseConfig.module.loaders, {
      test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/,
      loader: 'file?name=[sha512:hash:base64:7].[ext]',
      exclude: /node_modules\/(?!font-awesome)/
    }, {
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&amp;progressive&amp;interlaced',
      exclude: /node_modules\/(?!font-awesome)/
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
      exclude: /node_modules/
    }
  ]
},
plugins: [
  // extract css
  new ExtractTextPlugin('[name]-[chunkhash].css'),

  // set env
  new webpack.DefinePlugin({
    'process.env': {
      BROWSER: JSON.stringify(true),
      NODE_ENV: JSON.stringify('production')
    }
  }), ...

  ...baseConfig.plugins
]
};
</code></pre>

<p>Is this enough to give me a suggestion on how to make this work? Or suggest where i can get some more info?</p>

<p>The docs say that I should require the css like this:
    require("css-loader?minimize!./file.css")</p>

<p>but I'm not sure how to implement. </p>

<p>Thanks!</p>

<p>Update: </p>

<p>So after trying out what @Brandon mentioned, I actually saw code in our entry already that require's the css file. </p>

<pre><code>if (process.env.BROWSER) {
  require('styles/app.css');
}
</code></pre>

<p>I updated that to: 
  require('css-loader?minimize!styles/app.css');
but ended up with this error: </p>

<pre><code>ERROR in ./~/css-loader?minimize!./app/styles/app.css
Module build failed: CssSyntaxError: /css-loader!/Users/homeImac/workspace/node_modules/style-loader/index.js!/Users/homeImac/workspace/node_modules/css-loader/index.js?sourceMap!/Users/homeImac/workspace/node_modules/postcss-loader/index.js!/Users/homeImac/workspace/app/styles/app.css:5:1: Unknown word
</code></pre>

<p>but that word is @import, does this make sense? If you guys can enlighten me on why this error is appearing, I'd appreciate it. </p>

<p>Thanks again!</p>