Class names not included in production (heroku / css-modules css-loader)

[fabioaanthony]

Everything works in DEV. Everything else works in production except for CSS-Modules class names are missing and CSS-Module class styles are included in Application.css pack, but not hashed.

Compiled locally with ./bin/rake NODE_ENV=production webpacker:compile and the CSS pack is built properly into the packs dir, I see

According to the error, config/webpacker.yml is misconfigured. Which is pretty much untouched except for HMR

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

My application.html.erb includes (and I can see the minified CSS is included in PROD and the styles are there but the class name's aren't hashed.

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

I believe my problem is here in webpack/development.js, which looks like:

const environment = require('./environment')
const sassLoader = require('./loaders/sass')

environment.loaders.append('sass', sassLoader)

module.exports = environment.toWebpackConfig()

if I move this config to webpack/environment.js or webpack/production.js, everything breaks.

And sassLoader webpack config looks like this:

const {env} = require('../environment')
const autoprefixer = require('autoprefixer');

module.exports = {
  test: /\.scss$/,
  use: [
    {
      loader: require.resolve('style-loader')
    }, {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 2,
        modules: true,
        localIdentName: '[hash:base64:5]'
      }
    }, {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9',
            ],
            flexbox: 'no-2009'
          })
        ]
      }
    }
  ]
}

Again, everything works properly in DEV but CSS-Loader is not running PROD.

What should be in my webpacker.yml ? Any docs on this?

I've seen the following which aren't helpful in this case:
https://github.com/rails/webpacker#deployment
#368 #756

@gauravtiwari, perhaps you know how to config?

[gauravtiwari]

@fabbballin Have you tried this documentation? https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc

[fabioaanthony]

@gauravtiwari, yes that worked. Surprised by this because I had tried a similar snippet earlier [see: #1090] which didn't work. It had a subtle difference though which I didn't catch const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader') and the code I had earlier was get('style').

👍

[gauravtiwari]

@fabbballin Great 👍 Yes the style loader has now been split into - sass and css loader to have flexibility if you want to use things like - css modules and global stylesheets together.