title: Trying to use css-loader with webpack to minimize our css
body: <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>