如何使用webpack将字体加载到我的项目中？ [英] How do I load fonts into my project using webpack?

问题描述

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

  @ font-face {
 font-家庭：斯巴达联赛; 
 src：url（'/ assets / fonts / leaguespartan-bold.eot'）; 
 src：url（'/ assets / fonts / leaguespartan-bold.eot？#iefix'）format（'embedded-opentype'），
 url（'/ assets / fonts / leaguespartan-bold.woff2 ''）格式（'woff2'），
 url（'/ assets / fonts / leaguespartan-bold.woff'）格式（'woff'），
 url（'/ assets / fonts / leaguespartan-bold .ttf'）格式（'truetype'），
 url（'/ assets / fonts / leaguespartan-bold.svg＃league_spartanbold'）format（'svg'）; 
 font-weight：bold; 
 font-style：normal; 
 
 
 
 
我的webpack配置目前是这样设置的： p> 
 
 
  const webpack = require（'webpack'）; 
 const path = require（'path'）; 
常量PATHS = {
 dist：path.join（__ dirname，'/ dist'），
 src：path.join（__ dirname，'/ src'），
 style： path.join（__ dirname，'/ src / assets / stylesheets'）
} 
 $ b $ const TARGET = process.env.npm_lifecycle_event; 
 process.env.BABEL_ENV = TARGET; 
 exports.TARGET = TARGET; 
 
 var autoprefixer = require（'autoprefixer'）; 
 
 module.exports = {
 entry：[
'./src/index'
]，
解析：{
 extenstion： [''，'.js'，'.jsx'] 
}，
输出：{
 path：PATHS.dist，
 publicPath：'/'，
文件名：'bundle.js'
}，
模块：{
加载器：[
 {
 test：/\.jsx?$/，
加载器：['babel？cacheDirectory']，
包括：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 ，
包括：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 ，
包括：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（），
新的webpack.HotModuleReplacementPlugin（），
新的webpack.NoErrorsPlugin（）
] 
}; 
  
我的项目按预期构建，但字体看起来并没有加载。我不确定这个问题是否是我用于字体的路径，尽管我已经通过在css文件 src：url（'/ fakepath / wontwork /字体/ leaguespartan-bold.eot'）; 和webpack无法找到它，不会建立，所以它看起来像路径工作。
解决方案
你需要使你的路径相对 - 的CSS加载器不把绝对路径当作webpack资源。
 $ b 
 
 
对于以，默认行为是不翻译他们：
 $ b $ pre $ url $ / url。 png）=> url（/image.png）
  







I have a project using webpack and I am trying to load fonts into my scss. My base.scss file is trying to load the fonts in like so:

@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;

}

My webpack config is currently set up like this:

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()
  ]
};

My project builds as expected but the fonts don't appear to have loaded at all. I am not sure if the issue is the path I am using for the fonts, although I have tested this theory by changing the path of the font in the css file src: url('/fakepath/wontwork/fonts/leaguespartan-bold.eot'); and webpack fails to find it and won't build, so it does appear like the path is working.

解决方案

You need to make your paths relative - the css loader does not treat absolute paths as webpack resources.

For urls that start with a /, the default behavior is to not translate them:

url(/image.png) => url(/image.png)

这篇关于如何使用webpack将字体加载到我的项目中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！