使用字體真棒用的WebPack和ExtractTextPlugin

我遇到的WebPack和字體的困難......這是我的WebPack（共同）配置：使用字體真棒用的WebPack和ExtractTextPlugin

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' 
    }) 
    ] 
};

我引用字體真棒SCSS與

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

而CSS似乎是正確的，但只fontawesome-webfont.svg發出，沒有WOFF，沒有EOT ...

當我嘗試一下用的WebPack-DEV-服務器生成的頁面上，我看到了「廣場「而是Font Awesome圖標。

我在做什麼錯？

來源

2017-03-25 DanyUP

我解決安裝字體真棒（而不是字體真棒，SASS），並導入它的問題：

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

我與引導，青菜和glyphicons同樣的問題，我解決它改變從

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

進口到

來源

2017-03-25 21:59:46 DanyUP

使用字體真棒用的WebPack和ExtractTextPlugin

回答

相關問題