Webpack 4 + Material-UI: How minification of JSS w

Question

I am working on a project using Webpack 4.10.2 and Material-UI v1.1.0. MUI docs is talking about class name generator, and I am OK with the result of shortening classes names, but there is something I don't understand in the build process, I am probably missing a Webpack Module or Plugin (I am for instance just using babel-loader and no Plugin). I just tryed many combinations with UglifyJsPlugin (through optimization.minimizer) compress and mangle but nothing works.

The problem:

The class names injected in the document style tags are shortened, but not the corresponding classes in the body:

Development mode

Everything is fine when build my project in Development mode, using webpack -d:

<style type="text/css" data-jss="" data-meta="LayoutNavBar">
    .LayoutNavBar-flex-4 {
      flex: 1;
    }
</style>

and in the body, the corresponding classes

<h2 class="LayoutNavBar-flex-4">Title</h2>

Production mode

Styles are broken when I build in Production mode, I have inline style with shortened class names (that's good):

<style type="text/css" data-jss="" data-meta="LayoutNavBar">
    .jss4 {
      flex: 1;
    }
</style>

but in the body, CSS classes are still with their long names:

<h2 class="LayoutNavBar-flex-4">Title</h2>

instead of having:

<h2 class="jss4">Title</h2>

What am I missing to make it work ? Thanks

Answer 1

I had the same problem. In my case I was excluding node_modules from the server bundle, therefore Webpack wouldn't replace process.env.NODE_ENV in the module files, while in my client bundle, where node_modules were included, it did. So to also minify CSS on the server you will either need to include node_modules in the bundle or set the NODE_ENV environment variable in the command line session you run the server bundle from.

The best (platform-agnostic) way I could find is to run "npm start --production", or add it as a script in package.json. This will automatically set the NODE_ENV environment variable of the node session run by the script to production.