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

GitHub: https://github.com/Chirag161198/react-boilerplate 1

Вот реакция, которую я пытаюсь сделать с нуля. Я связал html с кодом реакции, но я не смог добавить стили (CSS). Я слышал о npm install style-loader, css-loader --dev, но не смог его настроить. Пожалуйста, предложите какой-то способ добавить к нему стили.

Заранее спасибо.

javascript,html,css,reactjs,webpack,

1

Ответов: 2

1

Вам нужно использовать стиль-загрузчик и css-загрузчик в вашем webpack.config.js

Сначала установите эти два пакета через npm: src

Затем создайте файл styles.css в своей папке и добавьте следующие стили в файл (только для демонстрационной цели, чтобы вы знали, что он работает правильно):body { background-color: #ff4444; }

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

Не забудьте импортировать файл css в src / index.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',
    }),
  ],
};

И используйте стиль-загрузчик и css-загрузчик в вашем webpack.config.js :

ExtractTextPlugin

Если вы не видите правильный вывод, вам может потребоваться перезапустить сервер Webpack dev снова. Я клонировал ваше репо и внес изменения, как я упоминал выше, он работает.

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

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

0

Привет, Чираг 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',
  }),

Позвольте мне знать, что проблема все еще сохраняется.

JavaScript, HTML, CSS, reactjs, WebPack,
Похожие вопросы
Яндекс.Метрика