Подключение шрифтов через CSS/SCSS в Webpack - это достаточно простая задача, которую можно выполнить с помощью нескольких шагов.
1. Установите необходимые зависимости.
Начните с установки двух пакетов через npm:
npm install --save-dev css-loader file-loader
css-loader - это загрузчик, который позволяет импортировать CSS файлы в ваш JS код и обрабатывать их. file-loader - загрузчик файлов, который позволяет загружать различные файлы (такие как шрифты) и автоматически копировать их в сборку.
2. Сконфигурируйте Webpack для обработки шрифтов.
В вашем конфигурационном файле webpack.config.js добавьте соответствующие правила для загрузчиков шрифтов. Например:
module.exports = {
//...другие настройки
module: {
rules: [
//...другие правила
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
}
}
В этой конфигурации мы указываем, что все файлы с расширениями .woff, .woff2, .eot, .ttf и .otf должны быть обработаны загрузчиком file-loader, который скопирует их в папку fonts/ в результирующей сборке.
3. Импортируйте шрифты в свой SCSS файл.
Создайте файл SCSS, в котором будете импортировать шрифты. Например, файл fonts.scss.
@font-face {
font-family: 'MyWebFont';
src: url('../fonts/myfont.woff2') format('woff2'),
url('../fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
В этом примере мы определяем новый шрифтовой семейство MyWebFont и указываем пути к файлам шрифтов. Обратите внимание, что пути в URL должны быть указаны относительно положения файла SCSS.
4. Импортируйте файлы SCSS в ваш JS код.
Наконец, импортируйте файл fonts.scss в ваш основной JS файл или другой файл SCSS.
// Для JS import './path/to/fonts.scss'; // Для SCSS @import './path/to/fonts.scss';
Webpack будет обрабатывать импортированные файлы и загружать шрифты в вашу сборку.
5. Используйте шрифты в своем CSS/SCSS коде.
Вашим шрифтом можно воспользоваться в стилях, например:
body {
font-family: 'MyWebFont', sans-serif;
}
Теперь, при сборке вашего проекта, Webpack автоматически скопирует шрифты и обработает импортированный файл SCSS, в результате чего шрифты будут доступны в вашем приложении.
Таким образом, вы можете легко подключить шрифты в Webpack, используя правила загрузчиков и импорт файлов в ваш код. Вышеописанный процесс позволяет вам централизованно управлять шрифтами и автоматически копировать их в сборку приложения.