如何使用样式加载器呈现嵌套类？

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>
      );
    }
  }

网页包：

{
    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"
}

它似乎不支持嵌套。相反，嵌套类确认是自己显示的。

如果可能的话，你能举个例子吗？

有一个相关问题：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 中创建的映射：