使用Webpack,Sass自定义字体无法生效

Question

我Webpack用来捆绑我的Sass文件,然后将它们处理成CSS.我也有自定义字体,我通过@font-facemixin 包含在我的Sass文件中.

我有一个文件夹结构如下:

MyAppFolder
??? app
?   ??? css
?   ?   ??? _custom_font.scss
?   ?   ??? _variables.scss
?   ?   ??? main.scss
?   ??? fonts
?   ?   ??? MyFont.otf
?   ??? images
?   ?   ??? home.png
?   ??? index.html
?   ??? js
??? webpack.config.js

的webpack.config.js是如下

^^^^ other config

loaders: [
  // SASS
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  },

  // FONTS
  {
    test: /\.(otf|eot|svg|ttf|woff)/,
    loader: 'url-loader?limit=8192'
  }
]
....

_custom_font.scss 如下:

@font-face {
  font-family: 'MyFont';
  src:  url('../fonts/MyFont.otf') format('otf');
}

main.scss 如下:

body {
  font-family: 'MyFont';
}

Webpack消失,构建一切都很好.我可以看到它包含自定义字体文件,如在webpack输出中我看到字体文件作为输出文件.

查看我的网页时,我看不到应用的自定义字体.我看到css定义是正确的,但字体看起来几乎像Times New Roman.当我从Sass文件中删除定义时,它又回到使用Helvetica Neue.我有自举,所以这就是我所期待的.

Answer 1

我猜你已经在某处找到了答案。无论如何，为被困在这里的人发布答案。

Resolve-url-loader 有帮助。请参阅https://github.com/bholloway/resolve-url-loader

如下更改您的 SCSS 加载器配置。

{
  test: /\.scss$/,
  loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}

确保output.publicPath配置正确。大多数情况下，应该是/。

output: {
  publicPath: '/'
}