Rails 6 环境下yarn安装的Semantic UI Icons图标无法加载如何解决

你遇到的图标加载失败问题，是Webpacker没有正确匹配Semantic UI依赖的字体文件路径、且未配置对应静态资源加载规则导致的，按以下步骤操作即可解决：

• 第一步：安装字体文件处理依赖
  运行命令：yarn add file-loader --dev

• 第二步：修改config/webpack/environment.js配置，添加字体资源加载规则，修改后的完整配置如下：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

// 新增字体文件处理规则
environment.loaders.append('fonts', {
  test: /\.(woff|woff2|eot|ttf|svg)$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'fonts/',
      publicPath: '/packs/fonts/'
    }
  }]
})

module.exports = environment

• 第三步：修改自定义CSS文件，先覆盖Semantic UI的默认字体路径变量，再导入核心样式，修改后的内容如下：

// 覆盖字体路径变量，~代表webpack识别的node_modules目录
$icons-font-path: '~@doabit/semantic-ui-sass/src/scss/themes/default/assets/fonts';
@import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss';

• 第四步：重启Webpacker服务生效
  开发环境直接停止当前运行的bin/webpack-dev-server进程后重新启动即可；生产环境执行rails assets:precompile重新编译静态资源。

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