Webpack 添加字体答案

【问题标题】：Webpack add fontsWebpack 添加字体
【发布时间】：2017-07-02 17:56:16
【问题描述】：

我正在使用this 回购。我想如何添加自定义字体？我在资产中创建了名为“字体”的文件夹，并将我的字体放在那里。

字体.scss

@font-face {
  font-family: 'Lato';
  src: url('../assets/font/Lato-Regular.eot');
  src: url('../assets/font/Lato-Regular.eot?#iefix') format('embedded-opentype'),
  url('../assets/font/Lato-Regular.woff2') format('woff2'),
  url('../assets/font/Lato-Regular.woff') format('woff'),
  url('../assets/font/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

我还添加了字体配置并将其添加到 app.modules.ts。

import '../styles/fonts.scss';

我的问题是我应该在 webpack 中添加什么代码才能使其正常工作。

【问题讨论】：

在你的 webpack.config.js 添加这个 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name ].[ext]' }
模块：{加载器：[] {测试：/\.(eot|svg|ttf|woff|woff2)$/，加载器：'file?name=public/fonts/[name]。 [ext]' } }
有意义吗？
如果这是你的 webpack 配置文件，那么是的
我很乐于助人，而你却在呻吟。我不是魔术师，我想帮助你。如果不是那么祝你好运

标签： javascript angular sass webpack

【解决方案1】：

您正在加载与 webpack 加载器和提取器创建的 CSS 文件相关的字体文件。我快速查看了那个样板文件，它已经包含了 sass 加载程序。

{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader!sass-loader'
  }),
  include: [helpers.root('src', 'styles')]
},

如果您的字体在正确的文件夹中，它应该可以工作。

【讨论】：