Question

我有一个使用webpack的项目，我正在尝试将字体加载到我的scss中。我的base.scss文件试图像这样加载字体：

@font-face {
    font-family: 'League Spartan';
    src: url('/assets/fonts/leaguespartan-bold.eot');
    src: url('/assets/fonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/leaguespartan-bold.woff2') format('woff2'),
         url('/assets/fonts/leaguespartan-bold.woff') format('woff'),
         url('/assets/fonts/leaguespartan-bold.ttf') format('truetype'),
         url('/assets/fonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
    font-weight: bold;
    font-style: normal;

}

我的webpack配置目前设置如下：

const webpack = require('webpack');
const path = require('path');
const PATHS = {
  dist: path.join(__dirname, '/dist'),
  src: path.join(__dirname, '/src'),
  style: path.join(__dirname,'/src/assets/stylesheets')
}

const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
exports.TARGET = TARGET;

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: [
    './src/index'
  ],
  resolve: {
    extenstion: ['', '.js', '.jsx']
  },
  output: {
    path: PATHS.dist,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel?cacheDirectory'],
        include: PATHS.src
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        include: PATHS.src
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=10000000",
        include: PATHS.src
      },
      {
        test: /\.svg/,
        loader: 'svg-url-loader',
        include: PATHS.src
      },
      {
        test: /\.jpg$/,
        loader: "file-loader",
        include: PATHS.src
      },
      {
        test:   /\.scss$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: PATHS.src
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: PATHS.src
      },
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: "file-loader",
          include: PATHS.src
      }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
  devtool: 'source-map',
  devServer: {
    contentBase: PATHS.dist,
    hot: true,
    historyAPIFallback: true,
    inline: true,
    progress: true,
    stats: 'errors-only'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

我的项目按预期构建，但字体似乎根本没有加载。我不确定问题是否是我用于字体的路径，虽然我已经通过更改css文件src: url('/fakepath/wontwork/fonts/leaguespartan-bold.eot');中字体的路径来测试这个理论，但是webpack无法找到它并且赢了＆＃39;构建，所以它看起来像路径正在工作。

Answer 1

你需要让你的路径相对 - css loader does not treat absolute paths as webpack resources。

对于以/开头的网址，默认行为是不翻译它们：
url(/image.png) => url(/image.png)

如何使用webpack将字体加载到我的项目中？

1 个答案: