5

Пользуясь гайдами, пытаюсь собрать все свои стили в одну сборку на Webpack. Имеется главный файл, в него импортируется другой, в котором несколько правил @font-face с путями к файлам шрифтов. При сборке Webpack выдаёт ошибку по этим путям, говорит: нужен специальный загрузчик:

ERROR in ./fonts/a_coppergothcaps-bold.ttf Module parse failed: Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

Но мне не то чтобы нужно (или нужно?) добавлять эти файлы в сборку. Мне достаточно, если в сборке останутся эти правила, и браузер сам подключит шрифты по ссылкам в них. Как сказать Webpack, чтобы не пытался обрабатывать эти пути, но просто вставлял их, как есть? Или я неправильно вижу решение проблемы? Может, я шрифтами неправильно распоряжаюсь?

Вот такие правила в конфиге:

module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },

2 ответа 2

4

Ссылка на полный конфиг

Вот мой способ подключения шрифтов для SCSS:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: [
             {
                 loader: 'file-loader?name=./assets/fonts/webfonts/[name].[ext]'
             },
             {
                 loader: 'file-loader?name=./assets/fonts/Roboto/[name].[ext]'
             }
         ]
}

Что бы это заработало нужно установить file-loader

После этого нужно загрузить шрифты в SCSS:

@font-face {
    font-family: 'Roboto Black';
    src: url("/fonts/Roboto/Roboto-Black.ttf");
}

Настройки webpack-dev-server:

devServer: {
        contentBase: [path.resolve(__dirname, "build"), path.resolve(__dirname, "assets")],
        compress: true,
        port: 4200,
        historyApiFallback: true,
        noInfo:true
}  

UPDATE 1

У меня описания шрифтов находятся в файле src/fonts.scss и файл src/variable.scss для хранения переменных размеров, цветов и т.п.
В variable.scss импортируется fonts.scss -> @import "/fonts.scss"; и после этого в любом другом файле стилей можно импортировать variable.scss. В определении шрифтор должен указываться не относительный путь до файла, а url.
Можно протестировать корректность вводимого адреса в браузере, например http://localhost:4200/fonts/Roboto/Roboto-Black.ttf, если было предложено сохранить файл значит все правильно.

5
  • Я правильно понимаю что ?name=./assets/fonts/webfonts/[name].[ext] - это запрос куда выкладывать файл и с каким именем? Если так, то лучше ли это, чем опция outputPath? А в чём смысл двух лоадеров подряд? Это ведь не цепочка? Спасибо. 31 янв 2018 в 20:29
  • 1
    @AleksandrShemetillo это путь до ваших файлов шрифтов. Два загрузчика для того что бы подключить другую папку шрифтов. Я еще не разобрался можно это сделать по другому или нет.
    – Bleser
    1 фев 2018 в 2:32
  • А как работает условие сортировки между папками? Или всё дублируется в обе? И такое ещё, вдруг знаете: file-loader работает, но только если вставляю правило @font-face непосредственно в главный файл scss. Если же делаю @import "typography" и вставляю правила туда, то выдаёт >Can't resolve '../../...ttf' in 'C:\...\project\...\scss' При этом последний путь принадлежит главному файлу scss, а не тому, в котором указаны шрифты. То есть относительный путь не от того места начинается. 1 фев 2018 в 15:09
  • 1
    @Aleksandr Shemetillo 1) Не понял что за условие сортировки? Папки webfonts и Roboto содержат разные шрифты. 2) Дополнил ответ, надеюсь Вам это поможет.
    – Bleser
    1 фев 2018 в 17:40
  • вон оно что. А я не мог понять, при чём тут девсервер) Спасибо за дополнение. Про сортировку: я имел ввиду, как webpak выбирает, куда именно выгружать файл, если объявлено два загрузчика с разными путями. 1 фев 2018 в 21:37
0
    module: {
rules: [
     {
  test: /\.(svg|png|gif|jpg)$/,
  exclude: /fonts/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]'
  }
}, {
  test: /\.(ttf|eot|woff|svg|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: `${PATHS.assets}css/fonts/[name].[ext]`,
    }
  }
},plugins: [
new CopyWebpackPlugin([{
  from: `${PATHS.source}/img`,
  to: `${PATHS.assets}img`
}, {
  from: `${PATHS.source}/static`,
  to: ''
}])
]}

Дабы избежать конфликта, я сделал так, благодарю что подняли этот вопрос, а также за данные на него ответы.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.