CODEWITHSUNDEEP
csswebpacksassfonts
derelektrischemoench
derelektrischemoench

Reputation: 403

Configure fonts in webpack

I have a slight problem with webpack here; I'm somewhat unable to load fonts. This is my webpack.config.js

const nodeExternals = require('webpack-node-externals');
const path = require('path');
const devMode = true;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry:
        [
            './src/main.js',
            './scss/main.scss'
        ],

    output: {
        filename: "main.min.js",
        chunkFilename: '[name].bundle.min.js?bust=[chunkhash]',
        path: path.resolve(__dirname, 'static_root'),
        publicPath: "/assets/"
    },
    target: "node",
    externals: [nodeExternals()],
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV == 'development',
                        }
                    },
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[ext]'
                }
            }
        ]
    }
};

This builds my css although then my local fonts aren't included / aren't rendered.. This also copies my Font to /static_root (which is where the css gets built to).

so I end up with this directory structure:

public/static_root/css/main.css
public/static_root/BebasNeue-Regular.ttf
public/static_root/main.min.js

I thought about just adjusting the path to the font in my scss file unfortunately though this lets the build process fail, since my working dir and the output root aren't the same.

My scss/font-directory is structured like so:

/public/scss/fonts/_fonts.scss
/public/scss/fonts/BebasNeueRegular.ttf
/public/scss/main.scss

So how can I achieve the inclusion of the font or how is this usually done since I found lots of different approaches online, that sadly didn't work out for me.

Any help would be greatly appreciated.

Greetings, derelektrischemoench

Upvotes: 2

Views: 1027

Answers (2)

derelektrischemoench
derelektrischemoench

Reputation: 403

So I found out what was causing the problems. It had to do something with the loader for the fonts (I was using an older one). I tried the whole thing with the url-loader like so:

{
  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
      limit: 10000,
      name: '[name].[ext]'
      }
  }

... which got it going. It was just kinda confusing, since I found a bazillion of tutorials on the web on how to achieve this, of which the most part was deprecated.

Thanks for the responses.

Upvotes: 1

Eric Tan
Eric Tan

Reputation: 1463

hey @derelektrischemoench, I think the example in Webpack official website is pretty good, you could follow the webpack config and its file structure:

https://webpack.js.org/guides/asset-management/#loading-fonts

Upvotes: 0

Related Questions