由于我对正在使用的工具的模糊理解，我未能确定问题的根源。 node-sass 不提供媒体查询聚合，但 css-mqpacker 提供，这就是我必须寻找问题解决的地方。 https://github.com/hail2u/node-css-mqpacker/issues/49。
你如何摆脱以下情况。
我通过将两个部分.scss文件@import到基文件来合并它们。每个文件都有媒体查询，它们为页面的相应元素提供样式。
/* contents of index.scss */
@import "_block.scss", "_block-2.scss";
第一个文件引入了两个断点，这些断点在 sass 编译样式表中的出现顺序由该文件中的顺序定义。
/* contents of _block.scss */
.block {
@media (max-width: 500px) {...}
@media (max-width: 450px) {...}
}
第二个文件的@import具有相同的断点集，加上一个用于max-width: 550px的断点。
/* contents of _block-2.scss */
.block-2 {
@media (max-width: 550px) {...}
@media (max-width: 500px) {...}
@media (max-width: 450px) {...}
}
在编译期间聚合相同的断点，但一个新的断点放在已编译样式表的末尾，覆盖特定元素的所有断点的属性，这是不希望的行为。
/* stylesheet compiled by sass */
@media screen and (max-width: 500px) {
.block {...}
.block-2 {...}
}
@media screen and (max-width: 450px) {
.block {...}
.block-2 {...}
}
@media screen and (max-width: 550px) {
.block-2 {...}
}
什么是正确的解决方案？
此示例表示一个项目，在该项目中，我无法在第一个文件之前导入第二个文件，因为它引入了另一个覆盖问题。 我最终专门定义了样式来排序所有现有的断点，并尽早引入它，但这是我根本不喜欢的黑客，所以我仍然需要优雅的解决方案。
如果它导致这种影响，我担心嵌套在 CSS 规则中的媒体查询是否有用。在桌面优先和移动优先媒体查询中，顺序很重要，但即使在这种简单的情况下，我也没有足够的控制权。
.block {
background-color: lightblue;
}
@media screen and (max-width: 500px) {
.block {
background-color: lightgreen;
}
}
@media screen and (max-width: 450px) {
.block {
background-color: lavender;
}
}
另请参阅 https://www.w3schools.com/css/css_rwd_mediaqueries.asp
我添加了您当前的设置和建议的解决方案。 假设您确实需要按照您解释的顺序运行 2 个 css 文件。还假设您希望保持原样，但最终结果有效。
由于您可能(出于某种原因)不想删除CSS中的原始值，因此您必须将不想使用的值设置为透明值。这是背景色原始默认值。
作为第二步，您需要确定您真正想要的最大宽度。当您知道您可以保护系统时，可以通过添加"！important"来使用它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Current setup */
@media (max-width: 500px) {body {background-color: red}}
@media (max-width: 450px) {body {background-color: blue}}
@media (max-width: 550px) {body {background-color: green}}
/* Solution */
@media (max-width: 500px) {body {background-color: transparent}}
@media (max-width: 450px) {body {background-color: yellow !important;}}
@media (max-width: 550px) {body {background-color: transparent}}
</style>
</head>
<body>
test
</body>
</html>