better fonts import using fontawesome-sass-loader

config/webpack.common.js

@@ -132,13 +132,11 @@ module.exports = {
       },
 
       {
-        test: /\.woff(2)?$/,
-        loader: "url-loader?name=/assets/fonts/[name].[ext]&limit=10000&mimetype=application/font-woff"
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"
       },
 
       {
-        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: "file?name=/assets/fonts/[name].[ext]"
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"
       },
 
       {

package.json

@@ -59,6 +59,7 @@
     "bootstrap-loader": "^1.0.8",
     "core-js": "^2.2.2",
     "font-awesome": "^4.6.1",
+    "font-awesome-sass-loader": "^1.0.1",
     "jquery": "^2.2.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",

src/app/app.scss

@@ -1 +1 @@
-@import "theme/theme";
+@import "theme/theme";

src/app/theme/sass/_fonts.scss

@@ -1,2 +0,0 @@
-// TODO: is this the best way to resolve modules' paths to the file?
-@import "../../../../node_modules/font-awesome/scss/font-awesome.scss";

src/app/theme/sass/conf/_variables.scss

@@ -57,7 +57,3 @@ $font-light: 300;
 $font-normal: 400;
 $font-bold: 700;
 $font-ultraBold: 900;
-
-// overrides default font awesome fonts path
-// not needed in case of copying fonts into assets path
-$fa-font-path: $fonts-root;

src/app/theme/theme.scss

@@ -1,5 +1,4 @@
 @import "sass/conf/conf";
-@import "sass/fonts";
 @import "sass/bootstrap-overrides/overrides";
 
 @import "sass/blur-admin-theme";

src/main.browser.ts

@@ -1,5 +1,6 @@
 import 'jquery';
 import 'bootstrap-loader';
+import 'font-awesome-sass-loader';
 
 /*
  * Providers provided by Angular