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

WytheChan
  • 766

在学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的样式并没有起作用,这是咋回事呢?

回复
阅读 3.8k
3 个回答

webpack4要使用 mini-css-extract-plugin 这个插件来打包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使用MiniCssExtractPlugin。

楼主找到解决方案了吗?我也是。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏