Javascript ReactJS应用程序的网页包配置-您可能需要适当的加载程序来处理此文件类型

我正在尝试为ReactJS应用程序配置webpack，但遇到以下错误，

当前未配置加载程序来处理此文件

错误：

[./src/styles.css] 268 bytes {main} [built] [failed] [1 error]
    + 325 hidden modules

ERROR in ./src/styles.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
> .App {
|   background: #e2e4e9;
| }
 @ ./src/App.js 45:0-22
 @ ./src/index.js



webpack.config.js
：

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

module.exports = {
    entry: './src/index.js',
    mode: 'development',
     output: {
      globalObject: 'self',
      path: path.resolve(__dirname, 'build'),
      filename: 'webpack-bundle.js',
      publicPath: path.resolve(__dirname, '/build/'),
   },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: ['/node_modules/' , '/src/styles.css']
         
        },
        {
          test: /\.(sass|css)$/,  
          include: /node_modules/,  
          loaders: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/dam.ico'
    })
  ],
  devServer: {
    publicPath: path.resolve(__dirname, '/build/'),
    port: 8085,
    hot: true,
  }
};


.babelrc

{
  "passPerPreset": true,
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}



package.json


  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.40",
    "@babel/core": "^7.13.1",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "eslint": "^7.17.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^8.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass": "^1.32.8",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.7.0"
  }
}




我希望webpack配置中的这一行是问题
include:/node\u modules/
。我认为这排除了
styles.css
文件所在的
src
目录。老实说，我不确定您是否需要这行代码来安装
node\u模块
，但是如果您删除或包含
src
目录，我认为app.css文件将得到处理

这里有一些
include
示例：
谢谢您的回复。我不确定，似乎没有这样的东西：
import./styles.css”