Fix issue incorrect paths for fonts. Add methods to Use relative paths

css/style_with_fonts.scss

@@ -0,0 +1,9 @@
+$font-path: '../fonts';
+
+@font-face {
+    font-family: 'Roboto';
+    src:url('#{$font-path}/Roboto.woff2') format('woff2'),
+        url('#{$font-path}/Roboto.svg') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

index.js

@@ -75,6 +75,18 @@ const publicApi = {
         return this;
     },
 
+    setFontsPublicPath(publicPath) {
+        webpackConfig.setFontsPublicPath(publicPath);
+
+        return this;
+    },
+
+    setImagesPublicPath(publicPath) {
+        webpackConfig.setImagesPublicPath(publicPath);
+
+        return this;
+    },
+
     /**
      * Used as a prefix to the *keys* in manifest.json. Not usually needed.
      *

lib/WebpackConfig.js

@@ -41,6 +41,8 @@ class WebpackConfig {
         // Global settings
         this.outputPath = null;
         this.publicPath = null;
+        this.imagesPublicPath = null;
+        this.fontsPublicPath = null;
         this.manifestKeyPrefix = null;
         this.sharedCommonsEntryName = null;
         this.providedVariables = {};
@@ -133,6 +135,22 @@ class WebpackConfig {
         this.publicPath = publicPath;
     }
 
+    setFontsPublicPath(publicPath) {
+        // guarantee a single trailing slash
+        publicPath = publicPath.replace(/\/$/,'');
+        publicPath = publicPath + '/';
+
+        this.fontsPublicPath = publicPath;
+    }
+
+    setImagesPublicPath(publicPath) {
+        // guarantee a single trailing slash
+        publicPath = publicPath.replace(/\/$/,'');
+        publicPath = publicPath + '/';
+
+        this.imagesPublicPath = publicPath;
+    }
+
     setManifestKeyPrefix(manifestKeyPrefix) {
         /*
          * Normally, we make sure that the manifest keys don't start
@@ -226,6 +244,26 @@ class WebpackConfig {
         return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath;
     }
 
+    getFontsPublicPath() {
+        // if we're using webpack-dev-server, use it & add the publicPath
+        if (this.useDevServer()) {
+            // avoid 2 middle slashes
+            return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath;
+        } else {
+            return this.fontsPublicPath;
+        }
+    }
+
+    getImagesPublicPath() {
+        // if we're using webpack-dev-server, use it & add the publicPath
+        if (this.useDevServer()) {
+            // avoid 2 middle slashes
+            return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath;
+        } else {
+            return this.imagesPublicPath;
+        }
+    }
+
     addEntry(name, src) {
         if (this.entries.has(name)) {
             throw new Error(`Duplicate name "${name}" passed to addEntry(): entries must be unique.`);

lib/config-generator.js

@@ -148,7 +148,7 @@ class ConfigGenerator {
                 loader: 'file-loader',
                 options: {
                     name: filename,
-                    publicPath: this.webpackConfig.getRealPublicPath()
+                    publicPath: this.webpackConfig.getImagesPublicPath()
                 }
             });
         }
@@ -165,7 +165,7 @@ class ConfigGenerator {
                 loader: 'file-loader',
                 options: {
                     name: filename,
-                    publicPath: this.webpackConfig.getRealPublicPath()
+                    publicPath: this.webpackConfig.getFontsPublicPath()
                 }
             });
         }

test/functional.js

@@ -486,6 +486,51 @@ describe('Functional tests using webpack', function() {
             });
         });
 
+        it('setFontsPublicPath() generates relativePath for fonts', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addStyleEntry('css/style', './css/style_with_fonts.scss');
+            config.setFontsPublicPath('../');
+            config.enableSassLoader();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                webpackAssert.assertManifestPath(
+                    'build/css/style.css',
+                    '/build/css/style.css'
+                );
+
+                webpackAssert.assertOutputFileContains(
+                    'css/style.css',
+                    'src: url(../fonts/Roboto.woff2) format("woff2"), url(/build/images/Roboto.svg) format("svg");'
+                );
+
+                done();
+            });
+        });
+
+        it('setImagesPublicPath() generates relativePath for images', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addStyleEntry('css/style', './css/style_with_fonts.scss');
+            config.setFontsPublicPath('../');
+            config.setImagesPublicPath('../');
+            config.enableSassLoader();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                webpackAssert.assertManifestPath(
+                    'build/css/style.css',
+                    '/build/css/style.css'
+                );
+
+                webpackAssert.assertOutputFileContains(
+                    'css/style.css',
+                    'src: url(../fonts/Roboto.woff2) format("woff2"), url(../images/Roboto.svg) format("svg");'
+                );
+
+                done();
+            });
+        });
+
         it('enableSourceMaps() adds to .js, css & scss', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');