Получаю Сбой разбора модуля: Unexpected token (1:0) error when I try to import css file for a specific component in react

Я создаю сайт тренажерного зала, используя React и Django. Я получаю эту ошибку, когда пытаюсь импортировать внешний css файл в компонент Homepage.Module parse failed: Unexpected token (1:0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов, в настоящее время ни один загрузчик не настроен на обработку этого файла. См. https://webpack.js.org/concepts#loaders

> #mainDiv{
|     position: absolute;
|     top: 50%;
 @ ./src/components/HomePage.js 4:0-28
 @ ./src/components/App.js 3:0-34 10:90-98
 @ ./src/index.js 1:0-35

webpack 5.68.0 compiled with 1 error and 1 warning in 2286 ms

Это мой код компонента:

    import ReactDom from "react-dom";
import Navbar from "./Navbar";
import React, { Component } from "react";
import "./css/Homepage.css";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <body>
        {/*<Navbar />*/}
        <div id="mainDiv" className="container">
          <div id="Homepgbtn1" className="mainbtns">
            <button type="button" class="btn btn-success">
              Plans
            </button>
          </div>
          <div id="Homepgbtn2" className="mainbtns ">
            <button type="button" class="btn btn-success">
              Get Started
            </button>
          </div>
        </div>
        <div id="rbdiv">
          <button type="button" class="btn btn-light">
            Instagram
          </button>
          <button type="button" class="btn btn-light">
            Twitter
          </button>
          <button type="button" class="btn btn-light">
            Youtube
          </button>
        </div>
      </body>
    );
  }
}

Вот мой код webpack.config.js:

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

Это мой package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "react-router-dom": "^5.2.0"
  }
}

пожалуйста, помогите мне, ребята, застрял на этой штуке на 36 часов

Webpack не понимает файлы CSS из коробки. Вам необходимо использовать css-loader с style-loader для работы с файлами CSS.

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      // Additional configuration to handle *.css files
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  // Other remaining configuration
};
Вернуться на верх