Question

我在使用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查看生成的页面时，我看到＆＃34; square＆＃34;而不是Font Awesome图标。

我做错了什么？

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

在Webpack和ExtractTextPlugin中使用Font Awesome

1 个答案: