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.
**original css containts: **
@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;
}
Webpack configuration:
- CSS loader:
const cssLoader = {
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false // Disabling url() processing
}
}
]
};
- SCSS module loader:
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" }
]
};
- Fonts loader (asset/resource)
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/
}
};
- MiniCssExtractPlugin:
new MiniCssExtractPlugin({
filename: (pathData) => {
return `tflex-themes/${pathData.chunk.name}.css`;
}
})
Problem:
After build, the paths in the CSS become:
url(../tflex-themes/icons/tficons.woff2) format("woff2")
But I need to preserve the original ones:
url("./icons/tficons.woff2")
What I've tried: Using url: false in css-loader — didn't help. Adding resolve-url-loader — no effect. Setting publicPath in asset/resource and **MiniCssExtractPlugin **— didn't solve it.
Question: How can I make Webpack not rewrite the paths inside url() and keep them exactly as they were in the original CSS file (url("./icons/tficons.woff2")), even if the final CSS file ends up in dist/tflex-themes/styles.css?