0

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?

Vlad Vinnikov
  • 1,457
  • 3
  • 22
  • 33

1 Answers1

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:

enter image description here

felixmosh
  • 32,615
  • 9
  • 69
  • 88
  • I've double checked it, `css-modules` with css-loader, creates it. – felixmosh Nov 12 '17 at 18:57
  • It flattens the the list of classes. I wonder if there is another solution for this – Vlad Vinnikov Nov 13 '17 at 01:23
  • I think that you didn't understood the idea, CSS-Modules is a thing that uglifys css selectors in order to create a "scoped" css. So, in my example above, the final css file will contain the nesting but with uglified class names, and the map that you got at the js not suppose to be nested but you need only the mapping. For example: `
    ` Will become `
    `
    – felixmosh Nov 13 '17 at 06:32