Webpack и шрифты с относительными путями - PullRequest
Новая
       9

Webpack и шрифты с относительными путями

0 голосов
/ 04 января 2019

В webpack.config.js есть конфигурация для объединения таблиц стилей (scss) и шрифтов 

{
  use: [{
    loader: 'style-loader'
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true
    }
  }],
  test: /\.scss$/
},
{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: './fonts/'
    }
  }]
}

таблица стилей (styles.scss) использует этот font-face 

@font-face {
  font-family: "Frutiger Roman";
  src: url("fonts/frutiger/FrutigerLTStd-Roman.eot");
  src: url("fonts/frutiger/FrutigerLTStd-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/frutiger/FrutigerLTStd-Roman.woff") format("woff"), url("fonts/frutiger/FrutigerLTStd-Roman.ttf") format("truetype"), url("fonts/frutiger/FrutigerLTStd-Roman.svg#Frutiger Roman") format("svg");
  font-style: normal;
  font-weight: 400;
}

Выход из веб-пакета - файл main.js 

output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
}

Когда я получаю доступ к main.js из root, например http://localhost:8080/, шрифт загружается правильно, с http://localhost:8080/fonts/FrutigerLTStd-Light.woff Но когда я получаю доступ из подкаталога, например http://localhost:8080/apps,, шрифт загружается из http://localhost:8080/apps/fonts/FrutigerLTStd-Light.woff, но его не существует. Есть ли способ заставить все шрифты загружаться из корня (/)?

1 Ответ

0 голосов
/ 04 января 2019

обратитесь к этому, эта точная проблема, кажется, одна глава в их документации: https://github.com/webpack-contrib/sass-loader#problems-with-url

...