如何为Sencha CMD构建的ExtJS应用添加自定义CSS文件？

针对你遇到的用Sencha CMD构建的ExtJS应用无法加载自定义CSS的问题，结合你给出的app.json配置，我整理了几个关键排查点和解决方案：

• 核对文件名与配置路径
  你提到要添加的是resources/Custom/myfile.css，但当前app.json的css配置里写的是resources/Custom/_body.css，文件名完全不匹配！先把path字段修正为实际的文件名：

  "css": [
      { "path": "resources/Custom/myfile.css" }
  ]
  

• 移除remote: true属性
  你配置里的remote: true是告诉Sencha CMD这个CSS是远程资源，不会将其打包到本地构建产物中，也不会从本地路径读取。如果这是你本地项目里的文件，必须去掉这个属性（或者设为false），否则构建过程会忽略这个本地文件。

• 确认文件实际存在且路径正确
  检查项目根目录下的resources/Custom文件夹里是否真的有myfile.css，注意在Linux/macOS环境下文件名是大小写敏感的，比如MyFile.css和myfile.css会被视为不同文件。

• 清理缓存并重新构建
  有时候Sencha CMD的缓存会导致配置修改不生效，先清理缓存再重新构建：

  # 清理旧构建产物和缓存
  sencha app clean
  # 重新构建生产环境
  sencha app build production
  

  如果是开发模式调试，用sencha app watch启动项目，实时监测文件变化并刷新，能更快验证修改效果。

• 确保资源目录被Sencha CMD扫描
  如果构建后发现myfile.css没有被复制到build/production/[你的应用名]/resources/Custom目录下，说明Sencha CMD没识别到这个资源目录。可以在app.json里添加resources配置，指定要扫描的资源目录：

  "resources": [
      "resources/Custom"
  ]
  

  这样构建时会自动把该目录下的所有文件复制到构建产物中。

• 开发模式下验证网络请求
  打开浏览器开发者工具的「Network」标签，过滤CSS文件，查看myfile.css的请求状态：

  • 如果是404错误，说明路径配置还是有问题，调整app.json里的path字段（比如是否需要加../或者其他层级修正）；
  • 如果请求成功但样式没生效，检查CSS里的选择器是否正确匹配ExtJS组件（比如ExtJS组件有自己的命名空间，可能需要用更具体的选择器）。

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