Some of the styles introduced by webpack4 into CSS, are invalid.

I am learning the configuration of webpack4 and can now run and package on the local server, but there is a strange problem that part of the missing style of the same CSS file is invalid.
entry file mian.js (only css files are introduced):

import "./css/index.css"

index.css file (only these two styles):

body{
    background: -sharpddd;
}
.box{
    width: 100px;
    height: 100px;
    background: red;
}

index.html file (after running on the local server):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link href="css/index.css?0c8ee01ed12f9ab6d544" rel="stylesheet"></head>
<body>
        <div class="box"></div>
<script type="text/javascript" src="bundle.js?0c8ee01ed12f9ab6d544"></script></body>
</html>

Page effect after running on local server:

you can see that the body style works, but the box style doesn"t work. What"s going on?

Oct.04,2021

webpack4 will use the mini-css-extract-plugin plug-in to package css


const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ]
            }
        ]
},
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css'
        }),
]

build uses MiniCssExtractPlugin.


has the landlord found a solution? Me too.

Menu