如何在Ruby on Rails应用中使用Salesforce Lightning Design System

• 确认页面根DOM节点已添加slds类，SLDS所有样式都是基于该类的后代选择器实现的，必须在最外层包裹节点（比如body标签或者页面根容器）上添加class="slds"，这是最容易被忽略的核心配置项
• 确认SLDS资源已正确放入资产目录，把下载的SLDS压缩包内的assets/styles、assets/fonts、assets/icons、assets/images四个目录完整复制到Rails项目的app/assets/slds/目录下，避免资源引用路径错位
• 调整资产管道加载配置，打开config/initializers/assets.rb，添加以下配置注册SLDS资源路径：

  Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'slds')
  # 将SLDS入口样式加入预编译列表
  Rails.application.config.assets.precompile += %w( salesforce-lightning-design-system.css )
  

• 修正SLDS样式内部的资源引用路径，SLDS默认的字体、图标引用路径是相对路径，适配Rails资产管道时，可以把样式文件里所有的url(/assets/替换为url(<%= asset_path '，后缀补充' %>)，也可以直接使用社区适配好的SLDS Ruby gem包，省去手动改路径的工作量
• 检查应用布局文件的样式引入语句，在app/views/layouts/application.html.erb的head标签内，确认引入语句正确：

  <%= stylesheet_link_tag 'salesforce-lightning-design-system', 'application', media: 'all' %>
  

• 排查默认样式冲突，如果生成过scaffold代码，Rails自动生成的scaffolds.scss内的全局标签样式会覆盖SLDS基础样式，直接删除该文件或者注释掉所有全局样式规则即可
• 配置完成后执行rails assets:clobber清除历史缓存的静态资源，再重启Rails服务刷新页面验证

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