javascript - Webpack，加载本地字体时遇到问题

Question

我在使用 webpack 时加载本地字体时遇到一些问题。我必须托管一些自己的字体，因此我在 /client/fonts 中有一个包含字体的文件夹。

现在，我正在使用 npm 脚本中的 && cp -R ./client/fonts dist/ 将它们加载到我的生产 Web 包构建中，以进行构建过程。我试图看看是否可以让 file-loader 为我执行此操作，这样我就不必依赖 cp。

经过一番谷歌搜索后，我尝试看看是否可以使用 filer-loader 来满足我的需求(在我的 webpack 生产版本中) -

  ,{
      test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader',
      query: {
        outputPath: 'fonts/'
      }
    }

但是，当我运行构建任务时，我没有看到任何字体导入。我不确定我在这里做错了什么。作为引用，我的 webpack 条目/输出如下所示:

  entry: {
    js: [
        path.join(__dirname, 'client/app.jsx')
    ],
    vendor: [
      'react',
      'react-dom',
      'lodash',
      'react-redux',
      'redux'
    ]
},
output: {
    path: path.join(__dirname, '/dist/'),
    filename: 'bundle.min.js',
    publicPath: '/'
},

对于 css (scss)，我使用像这样的加载器 -

    ,{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
    },

并导入到我的 base.scss 中，我有一个 _fonts.scss ，现在看起来像这样:

  // Custom fonts
@font-face {
  font-family: 'SharpGroteskBook25';
  src: url('/fonts/sharpgrotesk/SharpGroteskBook25.eot');
  src: url('/fonts/sharpgrotesk/SharpGroteskBook25.eot?#iefix') format('embedded-opentype'),
  url('/fonts/sharpgrotesk/SharpGroteskBook25.woff') format('woff'),
  url('/fonts/sharpgrotesk/SharpGroteskBook25.ttf') format('truetype'),
  url('/fonts/sharpgrotesk/SharpGroteskBook25.svg#SharpGroteskBook25') format('svg');
  font-weight: normal;
  font-style: normal;
}

我不确定我在这里做错了什么，让我的字体加载到我的产品服务器上。当我查看实时服务器时，我没有看到在 prod 任务中加载字体(出现 无法解码下载的字体 错误)。知道如何解决这个问题吗？我更喜欢 webpack 来加载它而不是使用 cp 命令。谢谢!

Answer 1

处理导入和 url 的 css-loader 不会翻译以 / 开头的 URL，因此您的 >file-loader 也不会被应用。

如果您希望 webpack 处理导入，解决方案是使用相对路径。请注意，CSS 没有用于相对导入的特殊语法，因此以下内容是等效的:

url('fonts/sharpgrotesk/SharpGroteskBook25.eot')
url('./fonts/sharpgrotesk/SharpGroteskBook25.eot')

如果您希望它们像模块一样被解析，webpack 提供了以 ~ 启动导入路径的可能性，如 css-loader Readme 所示。 .