来自模块的 React css 不适用（没有 webpack）

Question

我有一个 react 应用程序，它有几个模块。 对于一个模块，css 或 scss 不适用。 所有其他模块都应用scss。我已经从 css 更改为 scss 但不起作用。 我也尝试在后台使用 !importent ，但在开发人员控制台中，scss 根本没有出现。好像没有找到scss。

App.js

import React, {useEffect, useState} from 'react'
import './App.scss'
import EditView from "../editView/editView";



 return (
//some other html stuff
<div className="app_editContent">
                            <EditView action={actionToPerform}/>
                        </div>
)

EditView.js

import React from 'react';
import './editView.module.scss';
import {faSave, faStopCircle, faSun} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";


export default class EditView extends React.Component {


    constructor(props) {
        super(props);
    }


    showTitle() {
        return (
            this.props.action === "new" ? (
                [
                    <div className="edit_container">
                        <div className="edit_newListTitle">Neue Shoppingliste erstellen</div>
                        <label className="edit_titleInputLabel">Titel</label>
                        <input type="text" className="edit_titleInput" name="title"></input>
                        <label className="edit_locationInputLabel">Ort</label>
                        <input type="text" className="edit_locationInput" id="location" value=""></input>
                        <label className="edit_priorityInputLabel">Wichtigkeit</label>
                        <input className="edit_priorityInput" type="range" id="priority"
                               min="1" max="5" step="1"></input>
                        <label className="edit_toDoDateInputLabel">Erledigen bis</label>
                        <input className="edit_toDoDateInput" type="datetime-local" id="date"></input>
                        <input className="edit_amountInput" type="number" id="quantity" name="quantity" min="1"
                               value="1"></input>
                        <input className="edit_itemInputLabel" type="text" id="item" value=""></input>
                        <button className="edit_buttonSave"><FontAwesomeIcon icon={faSave}/></button>
                        <button className="edit_buttonCancel"><FontAwesomeIcon icon={faStopCircle}/></button>
                    </div>
                ]
            ) : this.props.action === "edit" ? (
                <div>edit</div>
            ) : (
                <div>nothing to show</div>
            )
        )
    }

    actionToPerformChange = (val) => {
        this.setState({actionToPerform: val});
        this.forceUpdate()
    }


    render() {
        return (<div>
                <button onClick={() => this.actionToPerformChange('new')}>Create new Shoppinglist</button>
                <button onClick={() => this.actionToPerformChange('edit')}>Edit Shoppinglist</button>
                {this.showTitle()}
            </div>
        )
    }
}

editView.module.scss

.edit_container {
    height: 100%;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto;
    background: yellow !important;
}

其他 scss 模块的构建方式相同，但它们确实有效。

Answer 1

我在发布后不久就找到了答案。如果使用 classNames 需要在 {} 中定义它，例如： className={styles.edit_container}