Font Mit Ehrfürchtig mit Webpack und ExtractTextPlugin

Question

ich Schwierigkeiten mit webpack und Schriften mit ... Das ist mein webpack (gemeinsam) 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' 
    }) 
    ] 
}; 

Ich Referenzierung Schrift ehrfürchtigen SCSS mit

$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'; 

Und die CSS scheint richtig, aber nur fontawesome-webfont.svg emittiert wird, kein woff, kein eot ...

Wenn ich versuche, bei der generierten Seite mit webpack-dev-Server zu sehen, sehe ich „Quadrate " stattdessen von Font Super Icons.

Was mache ich falsch?

Answer 1

aufgelöst ich das Problem bei der Installation font-awesome (anstelle von font-awesome-Sass) und es mit dem Import:

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

Ich hatte das gleiche Problem mit Bootstrap-Sass und glyphicons, und ich beschloß, es zu ändern der Import von

//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'; 

zu