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服务器上加载我的字体。当我查看实时服务器时，我没有看到prod任务中加载的字体（得到Failed to decode downloaded font错误）。知道如何解决这个问题吗？我更喜欢使用webpack来加载它而不是使用cp命令。谢谢！

Answer 1

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

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

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

如果您希望像模块一样解析它们，webpack可以使用~启动导入路径，如css-loader Readme所示。

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

1 个答案: