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