如何在使用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-臉部分：

@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，你需要使用適當的裝載機爲該類型的文件。