使用Webpack打包时部分CSS样式未生效的问题排查求助

你的问题出在CSS语法错误上：style.css中body样式块的闭合大括号后面多写了一个分号;，这会导致浏览器解析CSS时出现异常，进而忽略或无法正确识别后续的.black样式规则。

错误代码片段： #

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100wv;
    background-image: url('food.jpg');
    background-size: cover;
}; /* 此处多余的分号属于语法错误 */

修正后的CSS代码： #

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw; /* 顺便纠正笔误：正确视口宽度单位是vw，不是wv */
    background-image: url('food.jpg');
    background-size: cover;
} /* 移除多余的分号 */

.black {
    background-color: black;
    color: white;
    border: 1px solid;
    padding: 10px;
} 

另外补充：你写的width: 100wv是笔误，正确的视口宽度单位为vw，这个错误虽不影响.black样式生效，但会导致body宽度不符合预期，建议一并修正。

修正后重新执行Webpack打包，.black样式即可正常作用到目标div元素上。

内容的提问来源于stack exchange，提问作者ofg