Trying to use css-loader with webpack to minimize our css - reactjs

Question

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.
I'm also trying to learn our react code and conventions coming from front end javascript / jquery so this is new for me.
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.
A piece of our current code looks like this - prod.config.js :
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&progressive&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
]
};
Is this enough to give me a suggestion on how to make this work? Or suggest where i can get some more info?
The docs say that I should require the css like this:
require("css-loader?minimize!./file.css")
but I'm not sure how to implement.
Thanks!
Update:
So after trying out what #Brandon mentioned, I actually saw code in our entry already that require's the css file.
if (process.env.BROWSER) {
require('styles/app.css');
}
I updated that to:
require('css-loader?minimize!styles/app.css');
but ended up with this error:
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
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.
Thanks again!

Answer 1

So after trying to find solutions that solve the problem with loaders, I decided to look for another solution. A plugin called Purify CSS Plugin ended up being the answer.
new PurifyCSSPlugin({
purifyOptions: { info: true, minify: true }
})
Using the loader brought on a 'unknown word' error. Everything I tried either shifted the unknown word or did nothing to change the situation. All the folks online seemed to not be able to overcome this issue either.
Just proves the fact that there is usually more than one way to fix a problem.

Answer 2

put that require statement in one of your app's JavaScript source files. If it is a "global" css file, then your app's main entry JS file is a good candidate.
e.g. in app.js:
require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it