Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Как подключать шрифты при сборке scss на webpack?

Пользуясь гайдами, пытаюсь собрать все свои стили в одну сборку на 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'] }) } ] },


Ответ

Ссылка на полный конфиг
Вот мой способ подключения шрифтов для 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, если было предложено сохранить файл значит все правильно.

Комментариев нет:

Отправить комментарий