Добавить стиль в связанный код с помощью webpack

Вам нужно использовать style-loader и css-loader в вашем webpack.config.js

Сначала установите эти два пакета через npm: npm install style-loader, css-loader --dev

Затем создайте styles.css в папке src и добавьте в файл следующие стили (только для демонстрации, чтобы вы знали, что он работает правильно):

body {
  background-color: #ff4444;
}

Не забудьте импортировать файл css в свой src / index.js:

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'));

И используйте style-loader и css-loader в вашем webpack.config.js:

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 dev. Я клонировал ваше репо и внес изменения, как я упоминал выше, это работает.

Что касается ExtractTextPlugin, он вам понадобится при объединении для производственной сборки, вы можете узнать больше из их Репо

Надеюсь, поможет!

Hi Chirag ExtractTextPlugin отлично работает, но когда дело доходит до кеширования и хеширования пакетов. Пакет css становится 0 байт. Поэтому они представили MiniCssExtractPlugin, который решил эту проблему. Очень важно кэшировать статические файлы, поскольку размер вашего приложения со временем увеличивается. сначала импортировать плагин:

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

добавьте их в конфигурацию вашего веб-пакета:

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',
  }),

Сообщите мне, что проблема не устранена.