bjart
@bjart
web developer

Как правильно настроить пути к шрифтам в webpack при конвертации scss в css?

Структура проекта:

src/
├── fonts/
├── js/
├── images/
└── sass/


шрифты подключаются в _fonts.scss

@font-face {
	font-family: 'Geometria';
	src: local('Geometria Thin'), local('Geometria-Thin'),
		url('../fonts/Geometria-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}


в webpack настройка загрузки шрифтов:

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


При сборке проекта папка fonts копируется в dist/fonts, а в css он ищет шрифты в папке dist/css/fonts.
Как настроить webpack, чтобы при конвертации scss в css он прописывал пути как /fonts/... а не /css/fonts/?

UPD

Наверное, стоит еще описать настройки конвертации css

plugins: [
    new MiniCssExtractPlugin({
      filename: `./css/${filename('css')}`
    }),
],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
          loader: MiniCssExtractPlugin.loader,
          options: {}
        }, 'css-loader', 'sass-loader'],
      }
   ]
}
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 1
bjart
@bjart Автор вопроса
web developer
Нашел решение, нужно добавить publicPath который будет подставляться к url

use: [
          {
            loader: 'file-loader',
            options: {
              name: `fonts/[name].[ext]`,
              publicPath: "../",
            }
          }
        ]
Ответ написан
Ваш ответ на вопрос

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

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