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组件中所得到的。这是我学习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文件导入到组件中

React JS：index.css 1：0中的错误（模块解析失败：意外令牌（1：0））

1 个答案: