Why is WebPack 4 + React not importing *.css?

J

Jun18012018-07-19 12:20:19

React

Jun1801, 2018-07-19 12:20:19

Everything worked without webpack, I imported it like this:

import "./components/Modal/index.css";
import "./common/styles/index.css";
import 'bootstrap/dist/css/bootstrap.css';

When I started building with webpack, css is no longer included in the project

webpack.config.js

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

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.htm?$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>404 - Не найдено</title>
    <link rel="stylesheet" type="text/css" href="src/common/styles/reset.css" />
</head>
<body>
<div id="root"></div>
<script src="build/bundle.js"></script>
</body>
</html>

How to include .css files or collect them into a single bundle.css?

Reply

Answer the question

In order to leave comments, you need to log in

0 answer(s)