スタイルローダーでネストされたクラスをレンダリングする方法は？

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を取得しようとしている：私はファイル全体import dashboardStyle from '../../styles/dashboard.scss';をインポートする場合、私は、次を得る

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

を：

{ 
    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

あなたはちょうどあなたがcss-loaderを使用している場合、それはをネストずにCSSファイル内の各クラス名のプロパティを持つオブジェクトを作る、form変数であるかどうか確認することができます。

したがって、classNameにアクセスするには、form.formGroupと書くことができます。その

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

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

これは、モジュールをCSS PROD内のマッピングであるように見えるSCSSについては

編集 が作成されます。