如何通过CSS模块将样式应用于React组件

Question

我在将样式应用于我的React组件时遇到问题。 我通过Yeoman为我的项目生成了模板。 它创建了许多配置文件，不仅是webpack.config.js，因此我有些困惑。 正如react-generator的自述文件说的那样，它无需安装即可支持某些功能，即开箱即用：*支持的不同样式语言（sass，scss，less，手写笔）*通过PostCSS进行样式转换据此，我展示了cfg/default.js一部分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 ，但是样式没有应用

有人可以帮我吗？

Answer 1

仅需注意，将$添加到您的加载程序测试属性上是很好的，例如。 测试：/.scss$/，只匹配我相信的文件结尾。

在“从'../../styles/todosStyle.scss'导入样式”之前，我还没有看到这一点； 这种说法表示您正在从sass文件中导出样式，也许可以将*导入为样式...可能有用，但是我没有使用这种方法。

尝试这个。 要求（'../../styles/todosStyle.scss'）; 这会将您的CSS与javascript捆绑在一起。 然后只需像平常在render函数上一样使用类即可。

还注意 如果您想为CSS创建一个单独的文件，则可以使用插件来完成。

Answer 2

您正在使用css模块，但尚未在Webpack配置中打开它们：

loader: 'style-loader!css-loader!postcss-loader'

变成

loader: 'style-loader!css-loader?modules!postcss-loader'

根据css-loader自述文件https://github.com/webpack/css-loader#css-modules 。