Webpack не загружает шрифты из bootstrap-icons
Проблема
При импортировании стилей bootstrap-icons Webpack не подтягивает папку fonts/, в которой лежат сами шрифты, из-за чего и возникает ошибка, т. к. в src/fonts/ таких файлов нет.
Обычные шрифты, которые лежат в src/, подтягиваются без проблем.
ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js
!./node_modules/sass-loader/dist/cjs.js!./src/index.scss)
Module not found: Error: Can't resolve './fonts/bootstrap-icons.woff2?24e3...47' in 'C:\project-name\src'
C:\project-name\src\fonts\bootstrap-icons.woff2 doesn't exist
C:\project-name\src\fonts\bootstrap-icons.woff doesn't exist
Код
Часть webpack.config.js:
{
output: {
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist/"),
assetModuleFilename: "public/[hash][ext][query]",
clean: true
},
module: {
rules: {
test: /\.html$/i,
use: ["html-loader"]
},
{
test: /\.(sa|sc|c)ss$/i,
// Здесь в начале также будет "style-loader" или MiniCssExtractPlugin.loader
// в зависмости от режима (development/production)
use: ["css-loader", "postcss-loader", "sass-loader"]
},
{
test: /\.(woff|woff2|eot|otf|ttf)$/i,
type: "asset/resource"
}
}
}
Часть index.scss
@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons";
Файловая структура
index.html
package.json
webpack.config.js
node_modules/
src/
index.js
index.scss
Исходники bootstrap-icons
Часть bootstrap-icons.css (в .scss то же самое, но более длинным способом)
@font-face {
font-display: block;
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff2?24e3...47") format("woff2"),
url("./fonts/bootstrap-icons.woff?24e3...47") format("woff");
}
Файловая структура
bootstrap-icons/
font/
bootstrap-icons.css
bootstrap-icons.scss
fonts/
bootstrap-icons.woff
bootstrap-icons.woff2
P.S. Странный баг/проблема с консолью (VS Code)
При выполнении npm run build в консоль IDE выводится куча текста — содержимое файлов bootstrap.css и bootstrap-icons.css после обработки, по всей видимости, — которая не влазит ни в какие рамки.
Странно это потому, что ничего и близко подобного я не писал.
Часть package.json
{
"scripts": {
"build": "webpack build --mode=production"
}
}
Часть webpack.config.js
const cfgProd = {
mode: "production",
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
use: [MiniCssExtractPlugin.loader]
}
]
}
}
Потом эта переменная объединяется с cfgCommon при помощи библиотеки webpack-merge.