1

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:

  1. CSS loader:
const cssLoader = {
  test: /\.css$/i,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        url: false // Disabling url() processing
      }
    }
  ]
};
  1. 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" }
  ]
};
  1. 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/
  }
};
  1. 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?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.