Custom font does not take effect with Webpack, Sass

Question

I use WebpackSass files to link and then process them in CSS. I also have custom fonts that I include in my Sass file using mixing @font-face.

I have a folder structure as follows:

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 as follows

^^^^ 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 as follows:

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

main.scss as follows:

body {
  font-family: 'MyFont';
}

Webpack leaves and builds everything. I can see that the custom font file is included in it, as in the output of webpack. I see the font file as the output file.

- . , css , Times New Roman. Sass, Helvetica Neue. bootstrap, , .

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: '/'
}