WordPress中如何编译SCSS文件？

优先检查主题/插件的内置编译机制 #

大部分支持SCSS开发的WordPress主题（比如Sage、UnderStrap）或自定义开发项目，都会自带Node.js构建工具链，你可以按照以下步骤操作：

• 进入站点对应的主题根目录，确认是否存在package.json文件
  • 若存在，先执行npm install安装全部依赖
  • 打开package.json找到scripts字段，通常会有对应编译命令：
    • 开发环境可执行npm run dev完成单次编译，或者执行npm run watch开启实时监听，修改SCSS后会自动完成编译
    • 生产环境可执行npm run build完成压缩版CSS的编译输出
• 确认WordPress的functions.php文件中引入的是编译后输出的CSS文件，直接引入SCSS文件浏览器无法识别，不会生效

无内置编译能力的处理方案 #

如果你的项目没有自带构建流程，可以选择两种方案实现编译：

方案1：使用WordPress插件自动编译 #

• 在WordPress插件市场搜索安装SCSS编译类插件，启用后配置SCSS源文件路径和CSS输出路径，插件会自动检测SCSS文件修改并实时编译
• 编译完成后无需手动上传文件，插件会直接替换输出的CSS文件，适合没有前端开发基础的用户

方案2：本地手动编译 #

• 本地安装sass命令行工具，修改SCSS文件后执行编译命令：
  sass 输入SCSS文件路径 输出CSS文件路径
• 也可以添加--watch参数开启自动监听，无需每次修改后手动执行命令：
  sass --watch 输入SCSS文件路径:输出CSS文件路径
• 编译完成后将生成的CSS文件上传到服务器对应主题目录，覆盖旧文件即可

编译后仍不生效的排查步骤 #

• 确认服务器上的CSS文件已经被新编译的版本覆盖
• 清理站点缓存：如果使用了缓存类插件（如WP Rocket、WP Super Cache），需要先清空站点缓存
• 清理浏览器缓存，或使用无痕模式访问验证，也可以在functions.php引入CSS的代码中添加版本号参数，例如style.css?v=1.0.2，强制浏览器加载最新版本文件

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