微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Webpack 尝试解析已删除的 CSS 文件模块

如何解决Webpack 尝试解析已删除的 CSS 文件模块

我有一个 React 应用程序,我想在其中使用 webpack(和 babel)。 在遇到很多麻烦之后,我决定清理我的程序并删除我的 CSS 文件(以简化一切)。虽然我设法通过这种方式摆脱了一些错误,但我又得到了一个我根本无法修复的新错误

现在我收到错误消息:

ERROR in ./src/App.js
Module not found: Error: Can't resolve './App.css' in 'C:\Users\Garbers\harvardedx\finalproject\finalproject\frontend\src'
 @ ./src/App.js 1:0-19
 @ ./src/index.js

我真的不知道问题出在哪里。

webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: "development",entry: "./src/index.js",output: {
    path: path.join(__dirname,"dist"),filename: "bundle.js",},devServer: {
    contentBase: path.join(__dirname,'dist'),module: {
    rules: [
      {
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: "babel-loader"
        },],optimization: {
    minimize: true,plugins:[
    new HtmlWebpackPlugin({
        template: './dist/index.html',filename: 'index.html',inject: 'body'
    })
  ]
};

package.json:

{
  "name": "frontend","version": "0.1.0","private": true,"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0","@material-ui/core": "^4.11.3","@testing-library/jest-dom": "^5.11.10","@testing-library/react": "^11.2.6","@testing-library/user-event": "^12.8.3","babel-loader": "^8.1.0","react-router-dom": "^5.2.0","react-scripts": "4.0.3","web-vitals": "^1.1.1","webpack-dev-server": "^3.11.1"
  },"scripts": {
    "start": "webpack --mode=development","build": "webpack --mode=production","dev-server": "webpack-dev-server","test": "react-scripts test","eject": "react-scripts eject","dev": "webpack --mode development --watch"
  },"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"main": "index.js","devDependencies": {
    "@babel/core": "^7.13.14","@babel/preset-env": "^7.13.12","@babel/preset-react": "^7.13.13","html-webpack-plugin": "^4.5.0","react": "^17.0.2","react-dom": "^17.0.2","webpack": "^4.44.2","webpack-cli": "^4.6.0"
  },"keywords": [],"author": "","license": "ISC","description": ""
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,document.getElementById('root')
);
?import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,document.getElementById('root')
);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。