Обслуживание шрифтов с помощью веб-пакета в среде Phoenix - PullRequest
Новая
       25

Обслуживание шрифтов с помощью веб-пакета в среде Phoenix

0 голосов
/ 06 ноября 2018

Я использую Phoenix 1.4 rc с веб-пакетом (по умолчанию). И у меня возникли проблемы с обслуживанием шрифтов в моем приложении. Я добавил шрифты в папку assets / fonts. Затем запустите его. Webpack жалуются на это, как это .. 

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

Так что я погуглил об этом и добавил этот код в 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"]
      }
    ]
  },

И запусти. Там нет жалоб от веб-пакета, но когда я иду в свое приложение. это говорит 

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

И Phoenix не генерирует папку 'fonts' в папке priv / static.

И я могу найти файл шрифтов в папке priv / static / js

Я думаю, что в файле webpack.config.js выходной путь - "/ priv / static / js" .. Так как я могу правильно обслуживать файл шрифтов? и что я тут не так делаю?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Вместо того, чтобы поместить его в папку js, вы можете указать от outputPath до file-loader: 

{
  test: /\.(svg|woff2?)$/,
  use: [{
    loader: 'file-loader',
    options : {
      name: '[name].[ext]',
      outputPath: '../fonts',
    }
  }],
},
0 голосов
/ 24 ноября 2018

Я только что заработал (надеюсь), возможно, не лучшая практика:

Поскольку файлы шрифтов помещаются в «/ priv / static / js», я добавил «publicPath» следующим образом, чтобы их можно было найти в файлах .css: 

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

У кого-нибудь есть лучшее решение, пожалуйста, дайте мне знать. Большое спасибо.

...