CODEWITHSUNDEEP
javascriptcssreactjs
DzITC
DzITC

Reputation: 879

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

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"
                }
            }
        ]
    }
}

Upvotes: 1

Views: 2605

Answers (1)

Mohammad Faisal
Mohammad Faisal

Reputation: 2363

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

Upvotes: 1

Related Questions