Question

我正在使用Webpack捆绑我的Sass文件，然后将它们处理成CSS。我也有自定义字体，我通过@font-face mixin包含在我的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: '/'
}

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

1 个答案: