Webpacker @ 4.2.2 - CSS Modules empty object issue

[jayjamero]

Hi,

Having some issues with importing scss files (css modules) into webpacker. I have a basic react component doing something like

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.scss';

export default class HelloWorld extends React.Component {
  render() {
    console.log("styless ", styles);
    return <h1>Noish</h1>
  }
}

Looking at this bit of code results in

const getStyleRule = (test, modules = false, preprocessors = []) => {
  const use = [
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2,
        modules: modules ? {
          localIdentName: '[name]__[local]___[hash:base64:5]'
        } : false
      }
    },

an empty style object:

However changing it to

const getStyleRule = (test, modules = false, preprocessors = []) => {
  const use = [
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2,
        modules
      }
    },

Finally gives me the style object i want

I still need all that magic from localIdentName. So had a look at this issue before: #2197 so my first thing was to bump it to get the updated dependency version of css-loader.

Not sure whats going on here

[gauravtiwari]

To enable css modules, you need to name file as style.module.scss

[jayjamero]

Cheers that did it!