Question

我想将css模块安装到create-react-app，我遇到了https://github.com/kitze/custom-react-scripts。

完成设置后，我在我的文件夹中创建了一个测试style.module.css文件，然后将其导入import styles from './style.module.css';，就像这样，

import React, { Component } from 'react';
import styles from './style.module.css';

console.log(styles); //returns '/static/media/style.module.b3708639.css'
console.log(styles.red); //returns 'undefined'

export default class Form extends Component {
    render = () => {
        return (
            <form onSubmit={this.handleSubmit}>
                <TextInput />
                <PasswordInput />
                <Submit />
                <p className={[styles.red, 'test'].join(' ')}>Test</p> //rendered <p class="test">Test</p>
            </form>
        );
    }

    handleSubmit = () => {
        console.log('submit!');
    } 
}

这是我的style.module.css内容

.facebook_button { margin-top:10px; }
.red { color:red; }

有任何建议吗？

Answer 1

从头开始安装custom-react-scripts作为脚本版本应该这样做。

像这样：

create-react-app my-app --scripts-version custom-react-scripts

否则，如果在同一个应用程序上使用CRA后安装，它将为其提供静态文件的/static/media/路径，这不会为您提供导入它的文件中所需的样式对象。

CSS模块不会返回课程

1 个答案: