如何使用style-loader渲染嵌套类？

Question

我正在尝试使用嵌套类渲染

.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'
 },

如果我导入整个文件import dashboardStyle from '../../styles/dashboard.scss';，我会收到以下内容：

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

它似乎不支持嵌套。而是嵌套的类确认显示在它自己。

如果可能的话，你能用例子指出doc吗？

有一个相关问题：How do you render nested SASS in webpack?

Answer 1

您可以查看form变量上的内容，如果您使用的是css-loader，则会在没有嵌套的情况下为css文件中的每个类名创建一个属性对象。

因此，为了访问className，您只需编写form.formGroup。

修改 对于看起来像那样的scss

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

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

这是css-modules创建的prod映射：