CODEWITHSUNDEEP
csswebpack
norekhov
norekhov

Reputation: 4318

Using null-loader to remove unneeded fonts in Webpack

I'm using FontAwesome and other font packages which include eot, ttf, svg fonts. I don't want to package them so I've got something like that in Webpack:

            /*
             * Load fonts from URL
             */
            {
                test: /\.(png|woff|woff2)(\?.*$|$)/,
                loader: 'file-loader'
            },

            /*
             * Remove outdated fonts
             */
            {
                test: /\.(eot|ttf|svg)(\?.*$|$)/,
                loader: 'null-loader'
            },

And then in main.css I got something like this:

url(fee66e712a8a08eef5805a46892932ad.woff) format("woff"),
url([object Object]) format("truetype"),
url([object Object]#fontawesomeregular) format("svg");

Which is not valid I believe and I don't see any FontAwesome icons. Is there a way to acheive it with Webpack?

Upvotes: 1

Views: 1363

Answers (2)

norekhov
norekhov

Reputation: 4318

At last I found a solution. Which is best described here

To ignore some fonts and still have proper CSS one need to combine ignore-loader which returns empty string + raw-loader which returns contents but not object.

        {
            // Ignore fonts
            test: /\.(eot|ttf|svg)(\?.*$|$)/,
            use: ['raw-loader', 'ignore-loader']
        },

Upvotes: 1

redconservatory
redconservatory

Reputation: 21934

If you only want to support woff you can use the url-loader

{
  // Match woff2 in addition to patterns like .woff?v=1.1.1.
  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader',
  options: {
    // Limit at 50k. Above that it emits separate files
    limit: 50000,

    // url-loader sets mimetype if it's passed.
    // Without this it derives it from the file extension
    mimetype: 'application/font-woff',

    // Output below fonts directory
    name: './fonts/[name].[ext]',
  },
},

Upvotes: 0

Related Questions