React JS: ERROR in index.css 1:0 (Module parse failed: Unexpected token (1:0))

Question

ERROR in ./leadmanager/frontend/src/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> :root {
|     --bg: #242526;
|     --bg-accent: #484a4d;
 @ ./leadmanager/frontend/src/components/layout/Header.js 24:0-25
 @ ./leadmanager/frontend/src/components/App.js
 @ ./leadmanager/frontend/src/index.js

This is what I've got by trying to import a CSS file to a React JS component. This is my third day learning react JS, I'm really green. This is what I've done to the Header.JS file.

Note: The page renders correctly if I'm not importing the CSS file.

import React, { Component } from 'react';
import '../../index.css';

export class Header extends Component{
    render() {
        return (
            <nav className="navbar">
                <ul className="navbar-nav">

                </ul>
            </nav>
        )
    }
}

export default Header

This is my CSS:

:root {
    --bg: #242526;
    --bg-accent: #484a4d;
    --text-color: #dadce1;
    --nav-size: 60px;
    --border: 1px solid #474a4d;
    --border-radius: 8px;
    --speed: 500ms;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

.navbar {
    height: var(--nav-size);
    background-color: var(--bg);
    padding: 0 1rem;
    border-radius: var(--border);
}

.navbar-nav {
    max-width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;

}

What I'm doing wrong in this situation?

This is my webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

Mohammad Faisal · Accepted Answer · 2020-09-19 13:29:33Z

1

try to install css-loader

npm install css-loader --save-dev

then in your webpack config file

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            } ,
            {
               test: /\.css$/ ,
                exclude: /node_modules/,
                use: {
                    loader: "style-loader", "css-loader"
                }
            }
        ]
    }
}

then you can import css files into your component

edited Sep 19, 2020 at 13:29

answered Sep 19, 2020 at 13:08

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DzITC Over a year ago

this is what I've got after changing the config file pastebin.com/tfSG76tm

Mohammad Faisal Over a year ago

check my updated answer . and let me know if it works

DzITC Over a year ago

No, it's not working, but I changed it to - pastebin.com/K0yKfWur and now it's working as it should!

DzITC Over a year ago

And also I had to install style-loader package

Collectives™ on Stack Overflow

React JS: ERROR in index.css 1:0 (Module parse failed: Unexpected token (1:0))

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related