您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件。 CSS

Question

我很新，所以请耐心等待。 我在我的 webpack 配置中使用 babel loader 作为 React 应用程序。 但是，它似乎不想处理 CSS。当我从我的项目中删除 CSS 文件时，它工作正常。 这是我得到的错误

ERROR in ./public/App.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, #window, body{
|   min-height: 100vh;
|   position: relative
 @ ./src/app/App.js 2:0-30
 @ ./src/index.js 3:0-28 4:50-53

这就是我的 webpack 的样子

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
    ],
  },
};

我的入口点 index.js

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

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

最后是 index.js 所指的我的 App.js

import '../../public/App.css'
import React from "react";
import { Menu, Navbar } from '../components';

// Menu app designed for mobile menu viewing. No ordering functionality.

const App = () => {
  return (
    <div id='window'>
      Hello im 
      <Menu />
      <Navbar/>
    </div>
  );
};

export default App;

Answer 1

Babel 旨在仅处理 JavaScript 个文件，因此如错误消息所示，您需要添加一个 CSS 加载程序。

如果您查看 Webpack 文档：

• https://webpack.js.org/loaders/style-loader/
• https://webpack.js.org/loaders/css-loader/

你会发现实际上你至少需要两个loader来处理你的css。

所以这是你应该做的：

• 安装样式加载器：

npm install style-loader

• 安装 css 装载机

npm install css-loader

• 通过向规则数组添加新值来更新 Webpack 配置，它将变为：

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
    },
  },
  {
    test: /\.css$/i,
    use: ["style-loader", "css-loader"],
  },
],

这应该可以修复错误。