0

I'm struggling with adding Font Awesome to my webpack project.

I use file-loader to get webfont files to static/webfonts/. Then I use mini-css-extract-plugin to extract css from bundle to static/css/. It results in wrong URLs such as:

static/css/static/webfonts/fa-solid-900.9451d5fe.woff2

Only way to make it work is outputting css to root (doing the same with file-loader doesn't work). Any ideas what I'm doing wrong?

Here is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, options) => {
  const isDev = options.mode === 'development';

  return {
    mode: isDev ? 'development' : 'production',
    entry: {
      app: './src/js/index.js'
    },
    output: {
      filename: 'static/js/[name].[contenthash:8].bundle.js',
      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
      path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash:8].css',
        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
          ]
        },
        {
          test: /\.(eot|woff|woff2|ttf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[contenthash:8].[ext]',
                outputPath: 'static/webfonts'
              }
            }
          ]
        }
      ]
    }
  };
};
  • You have static/css/static/webfonts/fa-solid-900.9451d5fe.woff2 as output, what is the output name you desire? – Layer Apr 15 '20 at 00:04
  • Simply working one. This url is of course from generated CSS file and it points to non-existing file. I tried to go back two directories in file-loader but it doesn't work like it. The whole mess is because the path is relative, so maybe somehow making it absolute would work. –  Apr 15 '20 at 00:10
  • Ok so you want the output as the first one but as i am understanding, the folder you are executing your above code is two directories next, if you execute your code, is generating the folder static/css/static/webfonts/ in the directory that is the code? or is failing to create this path?, (i know you not want to be in the same directory that is pointing your above code), but i need to know if the folders and the files are being generated. – Layer Apr 15 '20 at 00:22
  • If they are generated but in the wrong route, then i have a possible solution. – Layer Apr 15 '20 at 00:23
  • I've found solution (posted it as an answer). But to clarify the files where generated just fine. Static folder contains css and webfonts on the same level but urls in css pointed from css not root. Adding publicPath that goes backward two directories in mini-css-extract-plugin helped. I also noticed that title has wrong plugin name. Thank you for trying to help, next time I will spend ever more time on searching through related posts. –  Apr 15 '20 at 00:32

1 Answers1

0

Well thanks to an amazing stackoverflow algorithm, one of the Related posts gave me solution.

It seems that adding publicPath: '../../' for MiniCssExtractPlugin.loader makes it work. I'm not sure that it doesn't introduce other problems, but so far so good.

The full post that helped me: Webpack wrong relative path in css and html

PS: I regret finding it after posting, but sometimes even extensive search doesn't help much if you phrase is wrong :|