Evitar que webpack genere el CSS durante el build del servidor

Durante el desarrollo del proyecto del curso usamos webpack tanto para los archivos del cliente como para el servidor. Sin embargo seguro notaste que se esta generando dos archivos CSS.

Esto ocurre porque cuando hacemos el bundle necesitamos que webpack agregue los nombres de clases que generan mediante CSS Modules, de esa forma al cargar el CSS se van a aplicar correctamente los estilos y cuando React se renderice en el navegador no van a existir diferencias entre lo que se renderiza en el servidor y en el cliente.

Resulta que existe una forma de indicarle a nuestro loader de CSS que genere estos nombres de clases únicos, pero que no genere un archivo .css. Para esto debemos tomar nuestra configuración para el servidor y modificar donde agreguemos nuestro loader.

{
	test: /\.css$/,
	loader: ExtractTextPlugin.extract('style', 'css?modules'),
}

Simplemente hay que cambiar el valor de loader para dejar de usar ExtractTextPlugin.extract y el loader style y dejar solo css?modules pero modificándolo de la siguiente forma.

{
	test: /\.css$/,
	loader: 'css-loader/locals?modules',
}

Al usar css-loader/locales?modules le estamos diciendo que genere los nombres de clases para CSS Modules, pero que no haga nada más con el CSS, de esta forma no es necesario crear dos archivos .css y todavía va a funcionar hacer el server render y que luego se apliquen estilos sin problemas.