[Webpack] Static font in static css (like font-awesome) are not properly inlined with 'DEV' mode false

[durandx]

Current behaviour

With the webpack config provided by focus, the font contained in css are not properly inlined in prod mode.

Original css file :

@font-face {
  font-family: 'FontAwesome';
  src: url('../assets/fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../assets/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../assets/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../assets/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../assets/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Resulting css file after the webpack transformation :

@font-face {
  font-family: 'FontAwesome';
  src: url(http://localhost:3000/32400f4e08932a94d8bfd2422702c446.eot);
  src: url(http://localhost:3000/32400f4e08932a94d8bfd2422702c446.eot?#iefix&v=4.5.0) format('embedded-opentype'), url(http://localhost:3000/db812d8a70a4e88e888744c1c9a27e89.woff2) format('woff2'), url(http://localhost:3000/a35720c2fed2c7f043bc7e4ffb45e073.woff) format('woff'), url(http://localhost:3000/a3de2170e4e9df77161ea5d3f31b2668.ttf) format('truetype'), url(http://localhost:3000/f775f9cca88e21d45bebe185b27c0e5b.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

So, it's working for the dev mode, but not for the prod mode (because the font is not inlined in base64)

Expected behaviour

Please provide a webpack config plugin with inlining in 'prod' mode.

Versions

Focus-core: 0.13.0
Focus-components: 0.13.0

[JRLK]

@durandx : The solution we found with @pierr maybe can help you.

1.) We defined environnement variable in package.json

"betterScripts": {
    "bundle": {
      "command": "webpack --progress --colors",
      "env": {
       ...
        "FONTS_DIRECTORY": "../fonts"
      }
    },
    "webpack-dev-server-npm-focus": {
      "command": "node ./dev-server.js",
      "env": {
        ...
        "FONTS_DIRECTORY": "http://localhost:90/CelerisFrontEnd/fonts"
      }
    }
  },

2.) We defined a sass variable in webpack.config.js

   sassLoader: {
        data: '$fontsDir: "' + FONTS_DIRECTORY + '";'
    }

3.) We called the variable in our sccs files

@font-face {
  font-family: 'roboto-thin';
  src:url('#{$fontsDir}/Roboto-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[durandx]

I've found the problem the OUTPUT_PUBLIC_PATH is mandatory for releasing in "prod mode" : A klee-contrib/webpack-focus#9

[durandx]

I've opened a bug in webpack-focus project. I close this one.