如何通过css模块将样式应用于react组件

我在将样式应用于React组件时遇到了问题。我通过Yeoman为我的项目生成了模板。它创建了很多配置文件，不仅仅是webpack.config.js，因此我有点困惑。正如react generator的Readme文件所说，它在不安装的情况下支持开箱即用的一些功能：*支持不同风格的语言（sass、scss、less、手写笔）*通过PostCSS进行样式转换根据这一点，我展示了cfg/default.js 的一部分

'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文件。

因此，在我的todosStyle.scss文件中，我得到了以下代码：

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

基于此样式，我想对我的组件Todos.jsx:进行样式设置

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

但是样式没有应用，尽管我已经导入了todosStyle.scss

有人能帮我吗？