npm run start正常，npm run build时汉堡菜单CSS未编译的调试方法

问题描述 #

我使用SCSS、Tailwind和原生JavaScript实现汉堡菜单展开时的旋转效果，点击按钮通过JS切换open类。开发环境执行npm run start（对应命令：NODE_ENV=development webpack serve --mode development）时功能正常，但生产环境执行npm run build（对应命令：NODE_ENV=production webpack --mode=production）时，以下SCSS代码未被编译。同文件内的其他SCSS代码及JS逻辑均正常运行，且该CSS语法合法，需排查调试方法。

相关代码 #

SCSS代码

.open .hamburger__top-bun {
  transform: rotate(45deg);
}

.open .hamburger__bottom-bun {
  transform: rotate(-45deg);
}

HTML代码

<button data-behaviour="navToggle" id="menuBtn" class="z-100 hamburger flex justify-center items-center lg:hidden focus:outline-none" type="button">
  <span class="hamburger__top-bun"></span>
  <span class="hamburger__bottom-bun"></span>
</button>

JavaScript代码

const navToggle = document.querySelector('[data-behaviour="navToggle"]')

navToggle.addEventListener('click', function () {
    const btn = document.getElementById('menuBtn');
    const nav = document.getElementById('mobile-menu');

    btn.classList.toggle('open');
    nav.classList.toggle('flex');
    nav.classList.toggle('hidden');
    console.log(btn);
});

调试步骤 #

• 检查Tailwind的内容扫描配置：生产环境下Tailwind默认会清除未被检测到使用的CSS类。打开tailwind.config.js，确认content数组包含了所有动态添加open类的HTML/JS文件路径（比如./src/**/*.{html,js}），确保Tailwind能扫描到open类的使用场景，避免被误清除。
• 核查Webpack生产环境CSS处理配置：查看生产环境Webpack配置文件（如webpack.prod.js），检查css-loader、sass-loader、mini-css-extract-plugin等工具的配置是否正常，是否开启了过度压缩（如cssnano）导致样式规则被误删。可以临时关闭压缩插件，重新打包验证是否恢复正常。
• 确认SCSS文件导入路径：检查这段SCSS代码所在的文件是否被正确导入到项目入口文件中。开发环境热加载可能自动处理了路径问题，但生产环境打包时若路径错误或未导入，会导致样式不被编译。
• 查看生产打包后的CSS文件：直接打开dist目录下编译完成的CSS文件，搜索.open .hamburger__top-bun和.open .hamburger__bottom-bun，确认规则是否存在。若存在但未生效，可能是优先级被Tailwind类覆盖，可临时给样式添加!important测试，或调整选择器优先级（如改为.hamburger.open .hamburger__top-bun）。
• 验证生产环境动态类添加逻辑：在生产环境页面打开浏览器开发者工具的Elements面板，点击汉堡按钮后检查menuBtn元素的classList是否包含open类，确认JS逻辑在生产环境下确实正确添加了类。
• 排查SCSS语法或规则冲突：检查这段SCSS是否被其他嵌套规则覆盖，或存在语法细节问题（如分号遗漏、嵌套层级错误）。生产环境的sass-loader可能对语法要求更严格，可将这段代码单独提取到测试文件中，打包验证是否能正常编译。

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