使用Webpacker在Rails项目中加载字体和图片遇阻求助

针对你遇到的问题，结合这个特定版本组合的特性，我整理了一套经过验证的可行步骤：

1. 调整资源存放路径 #

Webpacker 3.x版本默认从app/javascript目录下解析前端资源，所以请将字体、图片移动到app/javascript/assets目录下，比如：

• 字体：app/javascript/assets/fonts/
• 图片：app/javascript/assets/images/

2. 修改Webpack配置文件 #

打开config/webpack/environment.js，替换为以下配置（避免和默认loader冲突，使用append而非prepend）：

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

// 配置字体加载规则
environment.loaders.append('fonts', {
  test: /\.(woff2?|ttf|eot|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/fonts/',
        publicPath: '/packs/assets/fonts/'
      }
    }
  ]
})

// 配置图片加载规则
environment.loaders.append('images', {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/images/',
        publicPath: '/packs/assets/images/'
      }
    }
  ]
})

module.exports = environment

3. 在React组件/样式中正确引用资源 #

方式一：在React组件中直接导入 #

// 导入资源
import MyCustomFont from '../assets/fonts/my-font.ttf'
import HeroImage from '../assets/images/hero.png'

// 在样式中使用
const StyledText = styled.div`
  font-family: 'MyCustomFont', sans-serif;
  src: url(${MyCustomFont}) format('truetype');
`

const StyledHero = styled.div`
  background-image: url(${HeroImage});
`

方式二：在SCSS/CSS文件中引用 #

// 在你的SCSS文件中
@font-face {
  font-family: 'MyCustomFont';
  src: url('../assets/fonts/my-font.ttf') format('truetype');
}

.custom-text {
  font-family: 'MyCustomFont';
}

.hero-section {
  background-image: url('../assets/images/hero.png');
}

4. 重新编译并重启服务 #

执行以下命令确保Webpack正确编译资源：

bundle exec rails webpacker:compile

然后重启Rails服务器，访问页面验证资源是否正常加载。

常见问题排查 #

• 如果资源仍无法加载，检查config/webpacker.yml中的public_output_path是否为packs（默认值），确保编译后的资源输出到public/packs目录
• 避免同时混用Webpacker和Asset Pipeline管理同一类资源，否则容易出现路径冲突
• 若必须混用，可在config/initializers/assets.rb中添加Webpacker输出目录到Asset Pipeline路径：

  Rails.application.config.assets.paths << Rails.root.join('public', 'packs')
  

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