Добавление CSS-файлов в проект React с помощью Webpack 4

Я создаю простое приложение React с нуля, используя Webpack. Я наконец смог запустить сервер разработки, и когда я попытался применить некоторые стили через CSS, файлы не загрузились, и я предполагаю, что моя конфигурация Webpack 4 неверна.

Вот код:

webpack.config.js

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

const path = require('path');


module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["react"]
                }

            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader'
            }
        ]
    },

};

Моя структура проекта такая, я буду включать только src, потому что он живет в корне:

 **src**
      |_assets
      |_componentns
      |_styles
        |_App.css
        |_index.css
      App.jsx
      index.js
      index.html

Я хотел бы иметь возможность добавлять несколько файлов CSS для каждого имеющегося у меня компонента и применять их, а также иметь возможность стилизовать индекс index.html. Большое спасибо за Вашу помощь.

Источник

3 ответа

Решение

Все, что вам нужно сделать, это импортировать файлы CSS, когда это необходимо, как если бы вы использовали модель JavaScript. Поэтому, если вы хотите иметь таблицу стилей для всего приложения, вы можете импортировать глобальную таблицу стилей в свой index.js,

import './styles/index.css';

и вы можете сделать то же самое для каждого компонента с определенными стилями

import './styles/App.css'

в этом случае вы можете настроить модули CSS, чтобы избежать наложения имен классов.

Источник

Ваш webpack Конфигурация выглядит отлично. убедись, что ты import требуется css файлы в вашем components,

import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}
Источник

Хорошо, ошибка новичка здесь, способ, которым я настроил веб-пакет, состоит в том, что я должен сначала собрать его, а затем запустить сервер разработки, а не наоборот. Все ответы выше действительны и полезны, я просто забыл запустить сборку после изменений.

Источник
Другие вопросы по тегам