webpack4 引入CSS，有部分样式无效

在学webpack4的配置，现在能在本地服务器跑起来和打包，但是发生一个奇怪的问题，就是同一个CSS文件缺有部分样式无效。
入口文件 mian.js（只引入了css文件）：

import './css/index.css'

index.css 文件（只有这两个样式）：

body{
    background: #ddd;
}
.box{
    width: 100px;
    height: 100px;
    background: red;
}

index.html 文件（在本地服务器运行后的文件）：

<!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>

本地服务器运行后的页面效果：
图片描述

可以看到body的样式起效了，但是box的样式并没有起作用，这是咋回事呢？

webpack javascript

阅读 5.2k

3 个回答

得票最新

stone

2.3k1310

发布于
2018-10-31

webpack4要使用 mini-css-extract-plugin 这个插件来打包css

合拾

322

发布于
2018-10-31

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使用MiniCssExtractPlugin。