Loading fonts and images with webpacker

I'm trying to simply load assets (fonts/images) into a Rails project using Webpacker. It's proven to be hilariously more difficult than it should be.

I'm using React on Rails 11.0.4, Rails 5.1.6, and Webpacker 3.5.3.

I've tried creating custom loader files to append to the webpack configuration, as referenced here.

// file.js

module.exports = {
  test: /\.(ttf|eot|otf)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    }
  }
}

// environment.js

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

environment.loaders.prepend('file', file)

module.exports = environment

And I've tried literally all 4 options outlined here.

I've tried using the asset pipeline, but that doesn't seem to work anymore.

I've never in all my years been so close to tears for something so incredibly simple. Shouldn't this be simple?? How am I the only one having so much trouble with this?

Answers:

Answer

mb i help you

{
        test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        exclude: path.resolve(__dirname, '../../app/assets'),
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'fonts/',
            useRelativePath: false
          }
        }
      },
      {
        test: /\.(png|jpg(eg)?|gif|ico)$/,
        exclude: path.resolve(__dirname, '../../app/assets'),
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'images/',
            useRelativePath: false
          }
        }
      },

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.