将@ font-face与webpack和vue.js一起使用

Question

在理解webpack时遇到一些麻烦，并让一些简单的东西工作。

我的字体文件是：

/src/assets/fonts/
brands.eot
brands.svg
brands.ttf
brands.woff

我在我的SASS中引用它们：

/src/assets/sass/0-plugins/_brands.sass

@font-face
  font-family: "brands"
  src: url("../fonts/brands.eot")
  src: url("../fonts/brands.eot?#iefix") format("embedded-opentype"), url("../fonts/brands.woff") format("woff"), url("../fonts/brands.ttf") format("truetype"), url("../fonts/brands.svg#brands") format("svg")
  font-weight: normal
  font-style: normal

.brand-stack-overflow:before
  content: "\47"

最终导入到：

/src/assets/sass/main.sass

但是，当我尝试以正常方式使用它时，图标不会显示。在我的.vue组件文件中引用如此：

<i class="brand-stack-overflow"></i>

Webpack并没有给我任何错误，而且我使用的是Webpack 3.6版

另外，我使用的是webpack样板文件，并且没有给出webpack.config.js文件。