title: Loading FontAwesome via Webpack: Fonts do not load
body: <p>I'm trying to understand how to load fonts via fontawsome when loading them through a scss file: </p>
  
  <p>this is my webpack config: </p>
  
  <pre><code>const path                      = require('path');
  const webpack                   = require('webpack');
  const UrlLoader                 = require('url-loader');
  const BrowserSyncPlugin         = require('browser-sync-webpack-plugin');
  const VueLoaderPlugin           = require('vue-loader/lib/plugin');
  const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
  const OptimizeCSSAssetsPlugin   = require('optimize-css-assets-webpack-plugin');
  
  publicFolder                    = path.resolve(__dirname, 'public');
  // appFolder                        = path.resolve(__dirname, 'app');
  
  module.exports = {
  
      entry: { 
                  // Selects main js file
                  main:   './public/es6/index.js'
      },
  
      output: {
                  // Main path for the js folder
                  path:       path.resolve(__dirname, 'public/js/'),
                  // Select teh name the main js file (after compression)
                  filename:   'bundle.js',
                  // Public path 
                  // publicPath: 'http://localhost:8080', 
                  publicPath: '/public/js/',
                  // Name the chunkFile (in case of external scripts)
                  chunkFilename: '[name].[contenthash].js'
      },
  
      module: {
                  rules: [    // Vue Files 
                              {
                                  test: /\.vue$/,
                                  exclude: /node_modules/, 
                                  loader: 'vue-loader', 
                                  options: {
                                              loader: {
                                                  scss: 'vue-style-loader!css-loader!sass-loader', 
                                                  css: 'vue-style-loader!css-loader'
                                              }
                                  }
                              },
                              // JS files 
                              {
                                  test:       /\.js$/,
                                  exclude:    /node_modules/,
                                  use: {
                                          loader: "babel-loader"
                                  }
                              },
                              // CSS / SASS files 
                              {
                                  test: /\.(sa|sc|c)ss$/,
                                  // test: /\.scss$/,
                                  use: [
                                          {
                                              loader: MiniCssExtractPlugin.loader,
                                          },
                                          {
                                              loader: 'css-loader',
                                              options: {
                                                          url: false,
                                                          minimize: true,
                                                          sourceMap: true
                                              }
                                          },
                                          {
                                              loader: 'postcss-loader'
                                          },
                                          {
                                              loader: 'sass-loader',
                                              options: {
                                                          sourceMap: true, 
                                                          minimize: true
                                              }
                                          }
                                  ]
                              },
                              // Forgot why I need this... 
                              {
                                  test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                  use: [{
                                      loader: 'url-loader',
                                      options: {
                                        limit: 100000
                                      }
                                  }]
                              }
                  ]
      },
      plugins: [  
                  // Load jQuery globally 
                  new webpack.ProvidePlugin({
                      $: 'jquery',
                      jQuery: 'jquery',
                      'window.jQuery': 'jquery'
                  }),
  
                  // Hot module
                  // new webpack.HotModuleReplacementPlugin(),
  
                  // BrowserSync: Load page automatically on change
                  new BrowserSyncPlugin({
                      proxy: 'https://potato.mywebsite.com/', 
                      port: 3000, 
                      files: [
                          '**/*.php'
                      ], 
                      ghostMode: {
                          clicks: false, 
                          location: false, 
                          forms: false, 
                          scroll: false
                      }, 
                      minify: false,
                      injectChanges: true, 
                      logFileChanges: true, 
                      logLevel: 'debug', 
                      logPrefix: 'webpack', 
                      notify: true, 
                      reloadDelay: 0
                  }),
  
                  // Provides a way to customize how progress is reported during a compilation
                  new webpack.ProgressPlugin(),
  
                  // Loads Vue
                  new VueLoaderPlugin(), 
  
                  // For webpack-dev-server (currently not in use)
                  // new webpack.HotModuleReplacementPlugin(), 
  
                  // Handle css in different files (scss file in login.js for example to a hashed login.css file)
                  new MiniCssExtractPlugin({ filename: '../css/[name].css' }), 
  
                  // CSS assets during the Webpack build and will optimize \ minimize the CSS
                  new OptimizeCSSAssetsPlugin({}),
  
                  // Not sure if needed yet
                  new webpack.NamedModulesPlugin()
  
      ],
      devServer: {
                      // https:       true,
                      headers:        { 'Access-Controll-Allow-Origin': '*' },
                      compress:       true, 
                      quiet:          true, 
                      hot:            true,
                      inline:         true
      }
  
  };
  </code></pre>
  
  <p>And this is my SCSS file where I load FontAwesome (and others).. </p>
  
  <pre><code>@import 'variable';
  
  // Colors
  @import 'colors/default';
  @import 'colors/green';
  @import 'colors/megna';
  @import 'colors/purple';
  @import 'colors/red';
  @import 'colors/blue';
  @import 'colors/blue-dark';
  @import 'colors/default-dark';
  @import 'colors/green-dark';
  @import 'colors/red-dark';
  @import 'colors/megna-dark';
  @import 'colors/purple-dark';  
  
  
  // Import Bootstrap source files
  @import "../../node_modules/bootstrap/scss/bootstrap";
  
  
  // This is for the icons
  @import '../assets/icons/font-awesome/css/fontawesome-all.css';
  @import '../assets/icons/simple-line-icons/css/simple-line-icons.css';
  @import '../assets/icons/weather-icons/css/weather-icons.min.css';
  @import '../assets/icons/themify-icons/themify-icons.css'; 
  @import '../assets/icons/flag-icon-css/flag-icon.min.css';
  @import "../assets/icons/material-design-iconic-font/css/material-design-iconic-font.min.css";
  
  
  // This is the core files
  @import 'core/core';
  @import 'widgets/widgets';
  @import 'responsive';
  
  
  // In This scss you can write your scss
  @import 'custom'; 
  </code></pre>
  
  <p>When running <code>npm run dev</code> (or others) i don't get any error mentioning fonts. </p>
  
  <p>When loading my website I get these URLS refrences in the "network" pannel: </p>
  
  <pre><code>https://mywebsite.potato.com/public/webfonts/fa-regular-400.woff
  https://mywebsite.potato.com/public/fonts/Simple-Line-Icons.ttf?-i3a2kk
  </code></pre>
  
  <p>pointing on font files that don't even exist in my directory (or at least do't get created..) </p>
  
  <p><a href="https://i.stack.imgur.com/8RIwr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RIwr.png" alt="enter image description here"></a></p>
  
  <p>How do I load fonts properly? </p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>Adding this for @FabioCosta</p>
  
  <pre><code>{
      test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
      use: [
              {
                  loader: 'file-loader',
                  options: {
                      name:       '[name].[ext]',
                      // name:        '[path][name].[ext]',
                      outputPath: '/public/fonts/',
                      publicPath: '/public/fonts/'
                  }
               }
      ]
  }
  </code></pre>
  
  <p>Adding the full module part: </p>
  
  <pre><code>module: {
              rules: [    // Vue Files 
                          {
                              test: /\.vue$/,
                              exclude: /node_modules/, 
                              loader: 'vue-loader', 
                              options: {
                                          loader: {
                                              scss: 'vue-style-loader!css-loader!sass-loader', 
                                              css: 'vue-style-loader!css-loader'
                                          }
                              }
                          },
                          // JS files 
                          {
                              test:       /\.js$/,
                              exclude:    /node_modules/,
                              use: {
                                      loader: "babel-loader"
                              }
                          },
                          // CSS / SASS files 
                          {
                              test: /\.(sa|sc|c)ss$/,
                              // test: /\.scss$/,
                              use: [
                                      {
                                          loader: MiniCssExtractPlugin.loader,
                                      },
                                      {
                                          loader: 'css-loader',
                                          options: {
                                                      url: false,
                                                      minimize: true,
                                                      sourceMap: true
                                          }
                                      },
                                      {
                                          loader: 'postcss-loader'
                                      },
                                      {
                                          loader: 'sass-loader',
                                          options: {
                                                      sourceMap: true, 
                                                      minimize: true
                                          }
                                      }
                              ]
                          },
                          {
                              test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                              use: [
                                      {
                                          loader: 'file-loader',
                                          options: {
                                              // name:        '[path][name].[ext]',
                                              name:       '[name].[ext]',
                                              outputPath: '/public/fonts/',
                                              publicPath: '/public/fonts/'
                                          }
                                       }
                              ]
                          }
  </code></pre>
  
  <p>Tried following: <a href="https://chriscourses.com/blog/loading-fonts-webpack" rel="nofollow noreferrer">https://chriscourses.com/blog/loading-fonts-webpack</a> 
  and doesn't seem to work. </p>
  
  <p>Adding CSS screentshot </p>
  
  <p><a href="https://i.stack.imgur.com/2mNGp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mNGp.png" alt="enter image description here"></a></p>