React-static: Importing typefaces

[calvinrbnspiess]

Although importing CSS is easy with the new version 2.0.0, it is still not possible to import fonts out-of-the-box. #40

The following could easily remedy the situation:

1. Adding font file extensions like .woff, .woff2, .eot, .ttf to the withFileLoader
2. Making the withFileLoader independent from the file extension by removing the test expression and by providing an exclude for .css and .js files
3. Providing a plugin out-of-the-box to load fonts e.g. withFontsLoader:

const withFontsLoader = config => {
    config.module.rules = config.module.rules.concat([
        {
            loader: 'url-loader',
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            query: {
                limit: 10000,
                name: 'static/[name].[hash:8].[ext]',
            },
        },
    ]);
    return config;
};

Thanks!

[tannerlinsley]

Would you like to make a PR to the plugins directory? It could include this
and also update the other file loader plugin with the changes you
mentioned.
On Sat, Oct 21, 2017 at 2:51 PM Calvin Reibenspieß [e-mail]
wrote:

Although importing CSS is easy with the new version 2.0.0, it is still
not possible to import fonts out-of-the-box. #40
https://github.com/nozzle/react-static/issues/40

The following could easily remedy the situation:

1. Adding font file extensions like .woff, .woff2, .eot, .ttf to the
   withFileLoader
2. Making the withFileLoader independent from the file extension by
   removing the test expression and by providing an exclude for .css and
   .js files
3. Providing a plugin out-of-the-box to load fonts e.g. withFontsLoader
   :

const withFontsLoader = config => {
config.module.rules = config.module.rules.concat([
{
loader: 'url-loader',
test: /.(png|woff|woff2|eot|ttf|svg)$/,
query: {
limit: 10000,
name: 'static/[name].[hash:8].[ext]',
},
},
]);
return config;
};

Thanks!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nozzle/react-static/issues/70, or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCSQpCZcA603iuU8c8H2oVyM7Hf4Dks5sullFgaJpZM4QBtjB
.

[D1no]

Funny how we are getting back to gatsbys plugin system 😅 I think requiring fonts is probably something that should also work "out of the box". This guy has a pretty interesting take at webpack config. Essentially, everything is enabled, but can be disabled: https://github.com/jakubbabiak/webpack-configurator

[alexiscordova]

I don't necessarily see this as a path towards a react-static-plugin system (these are just webpack rules, after all), but it could be tough to constantly update the withFileLoader plugin with everything that should migrate to dist.

I think the default option should be one of the following:

• Anything that is not supposed to be compiled (images, fonts, etc.) in src will move to dist (essentially following the 2nd option @calvinrbnspiess suggested)
• Standard image filetypes in src will move to dist, but anything else has to be a custom loader.

I'm personally good with either, since webpack rules are relatively straightforward to implement, but the documentation should be updated to reflect what is and is not supported by default.

[calvinrbnspiess]

@tannerlinsley I think @alexiscordova and @D1no's arguments are really good and I also think that the most important file types should be requirable without any further configuration.
I will propose a PR that allows us to load the most important file types via file-loader, but allows us to opt-out and provide custom loaders via those webpack transformer functions.