首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将@font-face与webpack的css-loader一起使用?

如何将@font-face与webpack的css-loader一起使用?
EN

Stack Overflow用户
提问于 2017-02-27 23:53:44
回答 1查看 2.5K关注 0票数 5

我正在尝试导入一些字体(如Roboto)在我的项目中使用的webpack,但他们都不起作用。

我的文件结构如下所示:

+-src---fonts-+-Roboto---Roboto.ttf
|             |
|             +-fonts.css
|
+-webpack.config.js

我的fonts.css文件:

@font-face {
    font-family: 'Roboto';
    src: url(/Roboto/Roboto.ttf) format('truetype');
}

我的webpack.config.js看起来像这样:

//...
loaders: [
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        modules: true,
        minimize: !isDebug,
        importLoaders: 1
      })}`,
      'postcss-loader',
    ],
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url-loader',
  },
  {
    test: /\.(wav|mp3|eot|ttf)$/,
    loader: 'file-loader',
  },
],
//...

当我运行webpack时,没有显示任何错误。但是文本字体没有加载(文本仍然是默认的字体系列,尽管我已经将font-family: 'Roboto'设置为Roboto元素)。

我尝试过的:

  1. .css文件的url()%s中的路径更改为相对路径:出现错误:

/~/css-loader?{“sourceMap”:true,"localIdentName":namelocalhash:base64:3","modules":true,"minimize":false,"importLoaders":1}!./~/postcss-loader!./fonts/fonts.css找不到模块:错误:无法解析/Users/EnixCoda/projectName/fonts @中的模块'Roboto/Roboto.ttf‘。/~/css-loader?{“sourceMap”:true,"localIdentName":"namelocalhash:base64:3","modules":true,"minimize":false,"importLoaders":1}!./~/postcss-loader!./fonts/fonts.css 6:135-163

有人能帮帮我吗?

EN

回答 1

Stack Overflow用户

发布于 2018-07-21 02:58:08

当我之前这么做的时候,你需要将@font-face url指向dist文件夹,或者是webpack输出文件的任何地方,相对于请求它们的dist文件夹中的文件。例如:

dist/
  assets/
    fonts/
      font-file.ttf
  css/
    style.css
  index.html

这意味着@font-face路径将是../assets/fonts/font-file.ttf,完全与src目录无关。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42490086

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档