html - 如何在使用 webpack 时在 css 中加载字体？

Question

我的元素目录的相关部分如下所示:

root    
  --src      
    --js    
    --styles    
      --less
        --main.less
      --fonts
        --Pixelated.tff
  --webpack.config.js

这是我的 webpack.config.js

的相关部分

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    },
    {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
  }
};

在 main.less 中，这是相关的@font-face 部分:

@font-face {
  font-family: 'Pixelated';
  src: url('../fonts/Pixelated.ttf');
}

我在 webpack 加载器上尝试了几个变体，但我已经查看了各种 github 问题，但无济于事。我也尝试过使用我的 tff 字体文件的绝对路径来证明概念，但这也不起作用，我想这一定与我的 webpack 设置有关。

Answer 1

改变你的

 {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
  },

到

{
    test: /(\.less|\.css)$/,
    loaders: [ 'style', 'css', 'less' ],
} 

它应该可以工作，main.css 文件是一个 css，您需要为该类型的文件使用适当的加载器。