resol-url-loader использует неверный относительный путь

Question

resol-url-loader использует неверный относительный путь

1

У меня есть приложение, написанное с помощью Webpack. Вот как загружаются мои scss файлы:

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},

И вот как загружаются мои шрифты:

{
   test: /\.woff(2)?(\?v=.+)?$/,
   use: 'url-loader?limit=10000&mimetype=application/font-woff'
},

{
   test: /\.(ttf|eot|svg)(\?v=.+)?$/,
   use: 'file-loader'
},

Тогда у меня есть файл app.scss с этой строкой:

@import "~primeng/resources/themes/omega/theme.scss";

В node_modules в файле с именем theme.scss есть импорт шрифта:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Но когда я компилирую, я получаю сообщение об ошибке:

'Module not found: Error: Can't resolve './fonts/roboto-v15-latin-regular.eot'
in 'path_to_project/src/app''

Похоже, что проблема в том, что Webpack ищет шрифт относительно app.scss вместо того, чтобы искать его относительно импортированного theme.scss. Это проблема, которую должен resolve-url-loader. Вы видите, что у меня уже установлен resolve-url-loader для scss файлов. Так что же тогда проблема?

Gherman 30 окт. 2017, в 13:28

Источник

Теги:

javascript

sass

webpack

primeng

1 ответ

Ещё вопросы

Gherman · Answer 1 · 2017-10-30T12-10-00.000Z

Я решил свою проблему, но это еще не конец истории, потому что сообщение об ошибке, которое я получаю, вводит в заблуждение. Это очень жутко, и это мешает отладке. На самом деле у меня были две проблемы, которые приводят к тому же сообщению об ошибке:

Некоторые scss файлы использовали roboto font-family, но не определяли его вообще.
Один файл имел @padding-left: 0 вместо padding-left: 0. Да, это почему-то заставило Webpack не находить шрифт.

Проблемы требуют дальнейшего изучения. Я вернусь к нему, когда у меня будет больше свободного времени.

ОБНОВИТЬ:

Хорошо. Посмотрим. Прошло два месяца с тех пор, как у меня была эта проблема, и мой код сильно изменился. Но до сих пор. Я добавил строку @padding-right: 0; с этим злом @ характер в том же месте, где это было 2 месяца назад. И voila, Webpack сообщает сообщение об ошибке, что он якобы не может разрешить какой-либо шрифт. Действительно, фатальные ошибки синтаксиса в SCSS могут спровоцировать ошибочные сообщения об ошибках относительно несвязанных шрифтов, которые не решены. Я удаляю строку, и шрифт легко разрешен. Возможно, это должно быть сообщено команде разработчиков Webpack или разработчиков разработчиков.

Итак, как вы решили эту проблему? У меня была эта проблема в течение 2 недель, и я не могу понять это, кроме как закомментировать primeng css.
@ RockGuitarist1 Я написал обновление. Я предлагаю вам перепроверить синтаксис ваших scss- или css-файлов.