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，你需要为这种类型的文件使用适当的加载器。

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

1 个答案: