Using Font Awesome with Webpack and ExtractTextPlugin

Question

I'm having difficulties with webpack and fonts... This is my webpack (common) config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.js', '.ts']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          },
          'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
      },
      {
        test: /\.scss$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', loader: [{ loader: 'css-loader?sourceMap' }, {loader: 'sass-loader?debug'} ] })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [

    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html',
      xhtml: true,
      minify: {
        removeAttributeQuotes: false,
        keepClosingSlash: true
      },
      filename: '../templates/index.html'
    })
  ]
};

I'm referencing font awesome scss with

$fa-font-path: '~font-awesome-sass/assets/fonts/font-awesome/';
@import '~font-awesome-sass/assets/stylesheets/_font-awesome-sprockets.scss';
@import '~font-awesome-sass/assets/stylesheets/_font-awesome.scss';

And the css seems correct but only fontawesome-webfont.svg is emitted, no woff, no eot...

When I try to look at the generated page with webpack-dev-server, I see "squares" instead of Font Awesome icons.

What am I doing wrong?

DanyUP DanyUP · Accepted Answer · 2017-03-25T21:59:46

I resolved the problem installing font-awesome (instead of font-awesome-sass) and importing it with:

$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome.scss';

I had the same problem with bootstrap-sass and glyphicons, and I resolved it changing the import from

//WARNING: Not working example
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';

to

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';

Using Font Awesome with Webpack and ExtractTextPlugin

1 Answers