bootstrap-sass 中 $icon-font-path 该如何配置

Question

.
|-- node_modules
|    |-- bootstrap-sass
|
|-- app
|    |-- app.scss

//app.scss
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

//Error
Uncaught Error: Cannot find module "../fonts/bootstrap/glyphicons-halflings-regular.eot"

按照@nealnote的回答，出现了如下报错（备注：我用的webpack打包，这样写还是会报错，提示缺少合适的loader）：

//app.scss
$icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
Module parse failed: /Users/cc/Desktop/project/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.

但是我按照官方说明把代码修改成如下时，却没有了报错：

@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

此处不再出现需要合适loader的错误，这是为什么呢？

Answer 1

loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'ng-annotate!babel?presets[]=es2015'
      },
      {
        test: /\.scss$/,
        loader: 'style!css!autoprefixer?{browsers:["> 0.01%", "last 2 version"]}!sass'
      },
      {
        test: /\.(jpe?g|png|gif|svg|webp)$/,
        loader: "url?limit=8192"
      },
      { test: /\.html$/,
        loader: 'raw'
      },
      {
        test: /\.woff$/,
        loader: "url?limit=10000&minetype=application/font-woff"
      },
      {
        test: /\.svg/,
        loader: "url?limit=10000&minetype=application/font-svg"
      },
      {
        test: /\.eot/,
        loader: "url?limit=10000&minetype=application/font-eot"
      },
      {
        test: /\.woff2$/,
        loader: "url?limit=10000&minetype=application/font-woff2"
      },
      {
        test: /\.ttf/,
        loader: "url?limit=10000&minetype=application/font-ttf"
      }
    ]

loader 把各字体都补完，就不再有出现报错。

Answer 2

//app.scss
$icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

style-loader
css-loader
url-loader