React css from module doesn't apply (no webpack)

Question

I've a react app, which has several modules. For one module, the css or scss doesn't apply. all other modules does apply the scss. I've changed already from css to scss but doesn't work. I've tried also to use !importent at the background, but in the developer console, the scss doesnt appear at all. Like scss is not found.

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

The other scss modules are build the same way but they do work.

Answer 1

I've found the answer shortly after posting. If using classNames need to define it in {} like : className={styles.edit_container}