将 Font Awesome 与 Webpack 和 ExtractTextPlugin 一起使用答案

【问题标题】：Using Font Awesome with Webpack and ExtractTextPlugin将 Font Awesome 与 Webpack 和 ExtractTextPlugin 一起使用
【发布时间】：2017-08-18 10:43:00
【问题描述】：

我在使用 webpack 和字体时遇到问题...这是我的 webpack（通用）配置：

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-server 查看生成的页面时，我看到的是“正方形”而不是 Font Awesome 图标。

我做错了什么？

【问题讨论】：

标签： css sass webpack font-awesome

【解决方案1】：

我解决了安装 font-awesome（而不是 font-awesome-sass）并导入它的问题：

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

我在使用 bootstrap-sass 和 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';

到

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

【讨论】：