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

Question

我正在尝试嵌套 classes 渲染

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

好像不支持嵌套。相反，嵌套 class 确认会自行显示。

如果可能的话，你能指出文档和示例吗？

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

Answer 1

你可以只检查 form 变量上的内容，如果你使用 css-loader 它会为 class 中的每个 class 名称创建一个对象属性 =29=] 没有嵌套的文件。

因此，为了访问 class 名称，您只需编写 form.formGroup.

编辑对于看起来像那样的 scss

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

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

这是 css-modules 创建的产品中的映射：

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

How to render nested classes with style-loader?

reactjs

webpack

webpack-style-loader

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

How to render nested classes with style-loader?

reactjs

webpack

webpack-style-loader

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