CODEWITHSUNDEEP
webpackelixirphoenix-framework
Tae
Tae

Reputation: 313

Serving fonts using webpack in Phoenix framework

I am using Phoenix 1.4 rc with webpack(by default). And I am having trouble with serving fonts in my app. I added fonts in assets/fonts folder.then run it. webpack complain about it like this..

./fonts/dashboard.ttf
    Module parse failed: Unexpected character '^@' (1:0)
    You may need an appropriate loader to handle this file type

So I googled about it and add this code in webpack.config.js

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: ["file-loader"]
      }
    ]
  },

And run it. There is no complain from webpack but when I go to my app. it says

(Phoenix.Router.NoRouteError) no route found for GET /css/b06871f281fee6b241d60582ae9369b9.ttf

And Phoenix doesn't generate 'fonts' folder in priv/static folder.

And I can find fonts file in priv/static/js folder

I think in webpack.config.js file, output path is "/priv/static/js".. So How can I properly serve fonts file? and what am I doing wrong here?

Upvotes: 2

Views: 877

Answers (2)

Gluten
Gluten

Reputation: 340

Rather than putting it with the js folder you can provide an outputPath to file-loader:

{
  test: /\.(svg|woff2?)$/,
  use: [{
    loader: 'file-loader',
    options : {
      name: '[name].[ext]',
      outputPath: '../fonts',
    }
  }],
},

Upvotes: 1

Gui Yan-Zhong
Gui Yan-Zhong

Reputation: 1

I just got it work (hopefully), maybe not the best practice:

Since font files go into "/priv/static/js", I added "publicPath" like this, so they can be found from .css files:

  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
    publicPath: "../js/"  // <-------------------------- added this
  },

Anyone has a better solution, please let me know. Thanks a lot.

Upvotes: 0

Related Questions