WebPack меняет URL -адреса в CSS во время сборки: как сохранить оригинальные относительные пути в URL ()CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 WebPack меняет URL -адреса в CSS во время сборки: как сохранить оригинальные относительные пути в URL ()

Сообщение Anonymous »

I have a CSS file with a @font-face declaration where font paths are specified as url("./icons/tficons.woff2"). However, when building with Webpack, these paths get rewritten to url(../tflex-themes/icons/tficons.woff2), which breaks icon rendering when using the library via npm.

Код: Выделить всё

@font-face {
font-family: tfIcons;
src: local("TFlex Generic Icons"), local("tflex_generic_icons"),
url("./icons/tficons.woff2") format("woff2"),
url("./icons/tficons.woff") format("woff"),
url("./icons/tficons.ttf") format("truetype");
font-weight: var(--tflex-font-weight-regular);
font-style: normal;
}
< /code>
[b] Конфигурация WebPack: < /strong> < /p>

 CSS Loader: < /li>
< /ol>
const cssLoader = {
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false // Disabling url() processing
}
}
]
};
< /code>

 Module Module Module: < /li>
< /ol>
const sccsModuleLoader = {
test: /\.module\.(css|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: { localIdentName: '[name]__[local]--[hash:base64:5]' },
url: false // Disabling url() processing
}
},
{ loader: "sass-loader" }
]
};
< /code>

 Fonts Loader (Asset /Resource) < /li>
< /ol>
const resourcesLoader = {
test: /\.(ttf|eot|woff|woff2)$/i,
type: 'asset/resource',
generator: {
filename: 'tflex-themes/icons/[name][ext]' // Fonts saved to dist/tflex-themes/icons/
}
};
< /code>

 minicssextractplugin: < /li>
< /ol>
new MiniCssExtractPlugin({
filename: (pathData) => {
return `tflex-themes/${pathData.chunk.name}.css`;
}
})
< /code>
 Проблема: < /strong>
После сборки пути в CSS становятся:
url(../tflex-themes/icons/tficons.woff2) format("woff2")< /code> < /p>
Но мне нужно сохранить исходные:
url("./icons/tficons.woff2")

Что я попробовал:
Использование url: false [/b] в css-loader -не помог.
Добавление Resolve- Url-Loader -нет эффекта.
STRET publicPath **-не решил.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-paths-in
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»