您需要在 webpack.config.js 中使用 style-loader 和 css-loader

首先，通过 npm 安装这两个包： npm install style-loader, css-loader --dev

然后，在 src 文件夹中创建一个 styles.css ，并将以下样式附加到文件中（仅用于演示目的，以便您知道它正常工作）：

body {
  background-color: #ff4444;
}

不要忘记在 src/index.js 中导入 css 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './styles.css'; // <- import the css file here, so webpack will handle it when bundling

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

并在 webpack.config.js 中使用 style-loader 和 css-loader：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

如果您没有看到正确的输出，您可能需要重新启动webpack 开发服务器。我已经克隆了您的 repo 并做了我上面提到的更改，它起作用了。

至于 ExtractTextPlugin ，在捆绑生产版本时您将需要它，您可以从他们的 Repo

希望对您有所帮助！

嗨，Chirag ExtractTextPlugin 效果很好，但当涉及到缓存和捆绑哈希时。Css 捆绑包变为 0 字节 。因此，他们推出了 MiniCssExtractPlugin ，它解决了这个问题。随着应用程序大小的增加，缓存静态文件确实很重要。 首先导入插件：

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

在您的 webpack 配置中添加这些：

rules: [

   {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.scss$/,
      use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    }
  ]
}
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),

让我知道问题仍然存在。

首先你需要加载style-loader和css-loader，然后在webpack.config.js文件的rules中添加如下代码。

{ test: /\.css$/,use: ['style-loader', 'css-loader']}

然后将style.css文件位置导入到index.js文件中，例如：

import "./style.css";

打包时，css代码会添加到bundle.js中。