Webpacker: Unable to bundle css from imported scss in production

[freezepl]

Hi!
We are using webpacker default configuration and importing scss files in jsx like this:
import './errors-popup.scss';

I am unable to get production compiled scss files under one applicaction-hash.css although css are in the manifest.json. After deploying site is without styles.

Should I import every single scss file in application.scss and then this file in application.js?

app/javascript
├── components
│   ├── setup-container
│   │   ├── configuration-container.jsx
│   │   ├── form-step
│   │   │   ├── form-step.jsx
│   │   │   └── form-step.scss
│   │   ├── product-mapping-step
│   │   │   ├── product-mapping-step.jsx
│   │   │   └── row.jsx
│   │   └── settings-step
│   │       └── settings-step.jsx
│   └── shared
│       ├── errors-popup
│       │   ├── errors-popup.jsx
│       │   └── errors-popup.scss
│       ├── link-failure
│       │   └── link-failure.jsx
│       └── setup-navbar
│           ├── setup-navbar.jsx
│           ├── setup-navbar.scss
│           ├── setup-step.jsx
│           └── setup-step.scss
├── packs
│   ├── application.js
│   ├── setup-container.js
│   └── shared.js
└── stylesheets
    ├── application.scss
    └── shared
        ├── _colors.scss
        └── _fonts.scss

production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production';
const environment = require('./environment');
environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader').options.sourceMapContents = false;
module.exports = environment.toWebpackConfig();

environment.js

const { environment } = require('@rails/webpacker')
module.exports = environment

webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  resolved_paths: []
  cache_manifest: false
  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
  dev_server:
    hmr: false
development:
  <<: *default
  compile: true
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    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
  public_output_path: packs-test
production:
  <<: *default
  compile: false
  cache_manifest: true
staging:
  <<: *default
  compile: false
  cache_manifest: true

packs/application.js

import '../stylesheets/application.scss';

packs/setup-container.js

import WebpackerReact from 'webpacker-react';
import ConfigurationContainer from '../components/setup-container/configuration-container';
WebpackerReact.setup({ ConfigurationContainer });

application.html.erb

    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'setup-container' %>
    <%= javascript_pack_tag 'shared' %>

There is no clear docs about it. I would like to remove maps and have all under two files. JS and CSS.
Thanks

[openscript]

I've the same problem. Also I cannot get fonts loaded in production. I ended up with abandoning webpacker.

[DougPuchalski]

@openscript I cannot count the number of times I've cursed webpack(er). It is not sustainable and a huge time sink whack-a-mole.

[adenta]

Were either of you able to resolve this issue?

[openscript]

@adenta Yes I eventually solved the issue for me.

I've created a new loader url.js:

module.exports = {
    test: /\.(tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: '[name]-[hash:5].[ext]'
        }
    }]
};

.. and loaded that during production:

const url =  require('./loaders/url');
environment.loaders.prepend('url', url);
environment.loaders.get('file').test = /\.(jpg|jpeg|png|gif|tiff|ico|svg)$/i;

The problem was the file-loader which tried to load the fonts as well and somehow didn't work.

[guillaumebriday]

There is no need to override your url-loader here. Check https://github.com/rails/webpacker/blob/master/docs/assets.md

Webpack is not easy on the first look for sure. :/

Can this issue be closed ?

[openscript]

As for me, yes. Thank you for asking!

Currently I'm happy with webpacker. I see the massive progress it made since February. Thank you contributors 🥰

[guillaumebriday]

@freezepl please consider closing the issue 👍