@Jun1801

WebPack плагин для исправления URL?

Всем привет! Буду благодарен если сможете помочь в решении такой проблемы:

0) Имеем такую файловую структуру:
+ dist/
--- loadable/
--- bundle.css
--- bundle.js
+ src
--- loadable/
...


1) Есть .scss файлы, в которых указаны пути, например:
font-face {
  font-family: Font1;
  src: url('../../loadable/fonts/52452.otf');
}

2) Есть такой webpack-конфиг:
{
            test: /\.(sass|scss)$/,
            include: path.resolve(__dirname, 'src'),
            use: ExtractTextPlugin.extract({
                use: [{
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        minimize: true,
                        url: false
                    }
                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }]
            })
        }

3) Все .scss файлы успешно собираются в bundle, но вот только пути просто копируются из исходников, т.е. в bundle указано тоже самое:
font-face {
  font-family: Font1;
  src: url('../../loadable/fonts/52452.otf');
}

А должно быть:
font-face {
  font-family: Font1;
  src: url('loadable/fonts/52452.otf');
}

Как решить эту проблему? Какой плагин использовать?
Пробовал resolve-url-loader, но похоже, что он не для этого
  • Вопрос задан
  • 208 просмотров
Решения вопроса 1
andrew-r
@andrew-r
Фронтенд-разработчик
У вас в опциях css-loader указано url: false, поэтому он не обрабатывает конструкции url('../*/font.otf') в стилях и оставляет их как есть. Уберите эту опцию, тогда css-loader будет пробовать зарезолвить указанные ресурсы, как если бы вы их импортили из JS. Скорее всего Вебпак заругается, потому что не будет знать, как обрабатывать эти типы файлов; чтобы не ругался, укажите в конфиге file-loader или url-loader для шрифтов и других подключаемых локально файлов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы