У меня тут такая проблема с webpack, что пути в font-face для шрифтов после сборки генерируются не правильно.
Вот так выглядит файл конфигураций:
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: "/node_modules/",
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]",
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
loader: "file-loader",
options: {
name: `${Paths.assets}fonts/[name].[ext]`,
},
},
{
test: /\.(sass|css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
postcssOptions: {
plugins: ["autoprefixer", "css-mqpacker", "cssnano"],
},
},
},
{
loader: "sass-loader",
options: { sourceMap: true },
},
],
},
],
}
Вот папка dist после сборки:
Файл fonts.scss:
@font-face {
font-family: "Monsterrat_700";
src: url("../fonts/Montserrat/Bold-700/Montserrat-Bold.ttf")
format("truetype"),
url("../fonts/Montserrat/Bold-700/Montserrat-Bold.woff") format("woff"),
url("../fonts/Montserrat/Bold-700/Montserrat-Bold.woff2") format("woff2");
font-weight: 700;
font-style: norml;
font-display: swap;
}
И вот этот путь получаю в конце:
@font-face {
font-display: swap;
font-family: Monsterrat_700;
font-style: norml;
font-weight: 700;
src: url(assets/fonts/Montserrat-Bold.ttf) format("truetype"),
url(assets/fonts/Montserrat-Bold.woff) format("woff"),
url(assets/fonts/Montserrat-Bold.woff2) format("woff2")
}
Буду благодарен каждым ответам, комментариям.
Точно такой же вопрос был задан 4 года назад, но без ответов. Надеюсь кто то решил это проблему и даст на этот вопрос ответ.