How to render nested classes with style-loader?

Question

I'm trying to get nested classes render

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;

  .formGroup {
    margin-bottom: 30px;
  }
}

import { form } from '../../styles/form.scss';

class Signin extends Component {
  render() {
    return (
      <div className={form}>
        <h1>Sign In</h1>
        <form>
          <div className="formGroup">
            <Field name="email" placeholder="Email" component="input" type="text" className="form-control" />
          </div>
          <button action="submit" className="btn btn-primary">Sign in</button>
        </form>
      </div>
      );
    }
  }

Webpack:

{
    test: /\.scss$/,
    loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!sass'
 },

If I import entire file import dashboardStyle from '../../styles/dashboard.scss'; I get the following:

{
    confirm: "dashboard---confirm---E_dk-",
    dashboard: "dashboard---dashboard---3Hfnh",
    header:"dashboard---header---3FG7b",
    ideaForm: "dashboard---ideaForm---3Vgcr",
    placeholder: "dashboard---placeholder---177bd"
}

It doesn't seem to support nesting. Instead nested class confirm is showing up on it's own.

Can you point to doc with example if this is possible?

There is a related question: How do you render nested SASS in webpack?

Answer 1

You can just check what is on the form variable, if you are using css-loader it makes an object with property for each class name in the css file without nesting.

So, in order to access the className you can just write form.formGroup.

Edit For scss that looks like that

.item-list {
  margin-top: 35px;

  .empty-cart {
    margin-top: 0;
  }
}

This is the mapping in prod that css-modules creates: