ReactJS App 的 Webpack 配置 - 你可能需要一个合适的加载器来处理这种文件类型

Question

我正在尝试为 ReactJS 应用程序配置 webpack，但遇到以下错误，currently no loaders are configured to process this file.

错误：

[./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"
  }
}

Answer 1

我认为 webpack 配置中的这一行是问题 include: /node_modules/。我认为这不包括 styles.css 文件所在的 src 目录。老实说，我不确定 node_modules 是否需要这一行，但是如果删除或包含 [=11] =] 目录，我认为 app.css 文件将被处理。

这里有一些 include 示例：https://webpack.js.org/configuration/module/#condition

ReactJS App 的 Webpack 配置 - 你可能需要一个合适的加载器来处理这种文件类型

Webpack configuration for ReactJS App - You may need an appropriate loader to handle this file type

javascript

reactjs

webpack

babel-loader