Mendix应用自定义SCSS图片URL路径配置失效问题求助

问题核心 #

1. 初始路径语法错误：..img/icon_details.png缺少斜杠，正确相对路径应为../img/icon_details.png，但这不是关键——Mendix编译部署时会重命名资源并调整路径（如自动添加DMS$Images$前缀），固定路径无法适配本地与云端的差异。
2. SCSS中直接写带$的路径会触发报错：$是SCSS的变量标识符，同时Mendix编辑器会拦截这类特殊字符。

可行解决方案 #

方案1：将图标放入主题resources目录，使用相对路径 #

• 将icon_details.png放入项目的theme/resources文件夹（无则新建）
• SCSS中使用相对路径引用：

  .mx-name-tabPage1::before{
      content: url('./icon_details.png');
  }
  

• 原理：Mendix编译主题时会自动处理resources下的资源，本地和云端部署都会正确映射路径，无需手动添加前缀。

方案2：使用Mendix资源变量（推荐） #

• 确保图片已上传到项目的Resources > Images库
• 在SCSS中通过@theme-image变量引用，编译时会自动替换为正确路径：

  .mx-name-tabPage1::before{
      content: url(@theme-image('icon_details.png'));
  }
  

• 注意：文件名需完全匹配（区分大小写）。

方案3：Base64嵌入图标 #

• 将icon_details.png转为Base64编码，直接嵌入SCSS：

  .mx-name-tabPage1::before{
      content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...[完整Base64编码]');
  }
  

• 优势：不依赖外部路径，本地云端均生效；适合小图标，大图标会增加SCSS体积。

额外提示 #

• 修改SCSS后本地运行需强制刷新浏览器（Ctrl+F5）清理缓存
• 确认项目设置中主题的SCSS文件已正确关联

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