webpackでcss modulesを使うとz-indexが圧縮されてしまう問題

タイトル通り。
Railsでwebpackerをアップグレードした段階で起きるようになったのでwebpackerの問題かと思ったら普通にwebpackでも起こるみたい

環境

• webpack 3.12.0
• @rails/webpacker 3.5

症状

• css moduleでz-indexにどんな値を設定してもコンパイル後は1になる
• z-index: 10000!importantもコンパイルされるとz-index: 1!importantになる
• ローカル環境では起こらない
• こういうのほんとやめて😫

解決

https://github.com/rails/webpacker/issues/1663
ここでproduction.jsに下記を追記しろと仰せだ…

production.js

environment.plugins.get('OptimizeCSSAssets').options.cssProcessorOptions.zindex = false;

とはいえsass-loaderを使っているので最終的にこのような形になりました

production.js

const cssLoader = sassLoader.use.find( lib => lib.loader === 'css-loader' );

cssLoader.options = Object.assign(cssLoader.options, {
 modules: true
});

参考

• https://github.com/rails/webpacker/issues/1663
• https://github.com/vuejs-templates/webpack/issues/614