CSSモジュールを介して反応コンポーネントにスタイルを適用する方法

IveはReactコンポーネントにスタイルを適用する際に問題が発生しました。私はYeomanによって自分のプロジェクトにテンプレートを生成しました。これはwebpack.config.jsだけでなく、多くの設定ファイルを作成したので、私はちょっと混乱しています。反応生成器のReadmeファイルには、インストールしないでいくつかの機能をインストールしてすぐに使用できるようになっています： *サポートされているスタイルの言語が異なります * PostCSSによるスタイル変換これによると、cfg/default.jsCSSモジュールを介して反応コンポーネントにスタイルを適用する方法

'use strict'; 
 
const path = require('path'); 
 
const srcPath = path.join(__dirname, '/../src'); 
 
const dfltPort = 8000; 
 
function getDefaultModules() { 
 
    return { 
 
    preLoaders: [{ 
 
     test: /\.(js|jsx)$/, 
 
     include: srcPath, 
 
     loader: 'eslint-loader' 
 
     }], 
 
    loaders: [ 
 
     { 
 
     test: /\.css$/, 
 
     loader: 'style-loader!css-loader!postcss-loader' 
 
     }, 
 
     { 
 
     test: /\.sass/, 
 
     loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax' 
 
     }, 
 
     
 
     { 
 
     test: /\.scss/, 
 
     loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded' 
 
     }, 
 
     { 
 
     test: /\.less/, 
 
     loader: 'style-loader!css-loader!postcss-loader!less-loader' 
 
     }, 
 
     { 
 
     test: /\.styl/, 
 
     loader: 'style-loader!css-loader!postcss-loader!stylus-loader' 
 
     },

私はこの部分が.scssファイルを変換するための責任があると思います。けれども、

import React from "react"; 

    import Todo from "./Layout/Todo.jsx"; 
    import TodoStore from "../../stores/TodoStore.jsx"; 
    import * as TodoActions from "../../actions/TodoActions.jsx"; 
    import styles from '../../styles/todosStyle.scss'; 

    export default class Todos extends React.Component { 
     constructor() { 
     super(); 
     this.getAllTodos = this.getAllTodos.bind(this); 
     this.state = { 
      todos: TodoStore.getAll(), 
     }; 
     } 

     getAllTodos(){ 
      this.setState({ 
      todos: TodoStore.getAll(), 
     }); 
     } 

     componentWillMount(){ 
     TodoStore.on('change', this.getAllTodos); 
     } 

     componentWillUnmount(){ 
     TodoStore.removeListener('change', this.getAllTodos); 
     } 

     createTodo(){ 
     if (this.refs.addTodo.value != ''){ 
      TodoActions.createTodo(this.refs.addTodo.value); 
      this.refs.addTodo.value = ''; 
     } 
     } 

     deleteTodo(todo){ 
     TodoActions.deleteTodo(todo); 
     } 

     completeTodo(todo){ 
     TodoActions.completeTodo(todo); 
     } 

     render() { 
     const {todos} = this.state; 
     const TodoComponents = todos.map(todo =>{ 
      return <Todo key={todo.id} {...todo} completeTodo={this.completeTodo.bind(this, todo)} deleteTodo={this.deleteTodo.bind(this, todo)}/>; 
     }); 

     return (
      <div> 
      <h1>Todos</h1> 
      <div class = {styles.input}> 
       <label class= {styles.label}>Add new Todo</label> 
       <input ref="addTodo"/> 
       <button class={styles.button} onClick = {this.createTodo.bind(this)}><i class="fa fa-plus-square-o"></i></button> 
      </div> 
      <ul class={styles.todos} class="row">{TodoComponents}</ul> 
      </div> 
     ); 
     } 
    }

が、スタイリングは適用されません。私は私のコンポーネントTodos.jsxのスタイルをしたい、このスタイリングに

 .todos { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    width: 100%;} 
    .input { 
    display: block; 
    text-align: center;} 
    .button { 
    width: 60px; 
    margin: 5px; } 
    .label { 
    display: block; 
    border: solid 1px; }

ベース：

は、だから私のtodosStyle.scssファイルで、私はこのコードを持っています私は輸入しましたtodosStyle.scss

私を助けることができるでしょうか？

出典

2016-03-27 Marek Czyż