将 Font Awesome 与 Webpack 和 ExtractTextPlugin 一起使用

Posted 2023-02-19

【中文标题】将 Font Awesome 与 Webpack 和 ExtractTextPlugin 一起使用

【英文标题】：Using Font Awesome with Webpack and 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 图标。

我做错了什么？

【参考方案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';