Webpack环境下CSS background-size规则被覆盖问题求助

你遇到的核心问题是行内样式优先级高于外部CSS：通过JS设置body.style.background时，用的是背景属性的简写形式，它会重置所有背景相关子属性（包括background-size、background-repeat），而你在外部CSS中定义的这两个规则，优先级低于JS生成的行内样式，因此被浏览器划掉失效，最终导致背景图重复。

以下几种方法可解决该问题，你可以根据练习需求选择：

方法1：单独设置backgroundImage（推荐） #

修改导出的JS代码，使用backgroundImage替代background简写，这样只会设置背景图路径，不会影响CSS中已定义的其他背景属性：

import Background from './background.png';
export const setBackGroundImage = () => {
  let body = document.querySelector('body');
  body.style.backgroundImage = `url(${Background})`;
};

方法2：在background简写中包含所有必要属性 #

如果一定要用background简写语法，可在JS中一次性声明所有需要的背景属性，确保样式符合预期：

import Background from './background.png';
export const setBackGroundImage = () => {
  let body = document.querySelector('body');
  // 注意简写顺序：图片路径 → 重复规则 → 定位 / 尺寸
  body.style.background = `url(${Background}) no-repeat center / cover`;
};

方法3：提升CSS选择器优先级（不推荐，仅作练习参考） #

通过!important强制提升CSS规则的优先级，让它覆盖行内样式（实际开发不建议使用，会破坏样式优先级逻辑）：

body {
    margin: 0;
    max-height: 100vh;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

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