React JS：index.css 中的錯誤 1:0（模塊解析失敗：意外令牌 (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

這就是我嘗試將 CSS 文件導入 React JS 組件所得到的。 這是我學習react JS的第三天，我真的很菜。 這就是我對 Header.JS 文件所做的。

注意：如果我沒有導入 CSS 文件，頁面會正確呈現。

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

這是我的 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;

}

在這種情況下我做錯了什么？

這是我的 webpack.config.js

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

Answer 1

嘗試安裝 css-loader

npm install css-loader --save-dev

然后在你的 webpack 配置文件中

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

然后您可以將 css 文件導入到您的組件中