Webpacker: Webpacker 3.2.0: can't resolve fonts

Created on 18 Dec 2017 · 6Comments · Source: rails/webpacker

I just upgraded from Webpacker 3.0.2 to Webpacker 3.2.0. The build broke saying it can find fonts anymore:

$ ./bin/webpack
set is deprecated! Use append instead
set is deprecated! Use append instead
set is deprecated! Use append instead
set is deprecated! Use append instead
Hash: 2b956514eb78a31fa138
Version: webpack 3.10.0
Time: 10512ms

[...]

ERROR in ./app/javascript/vendor.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/path/to/app/javascript'

[...]

ERROR in ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/path/to/.postcssrc.yml"}}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/vendor.scss
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/path/to/app/javascript'
@ ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/path/to/.postcssrc.yml"}}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/vendor.scss 6:399-442
@ ./app/javascript/vendor.scss
@ ./app/javascript/packs/application.js

This is repeated for each font the app is loading (font-awesome's and bootstrap's)

vendor.css imports font-awesome and bootstrap like this:

@import '~font-awesome/scss/font-awesome';
@import '~bootstrap/dist/css/bootstrap';

The fonts files are in the node_modules folder:

$ ls node_modules/font-awesome/fonts
FontAwesome.otf           fontawesome-webfont.eot   fontawesome-webfont.svg   fontawesome-webfont.ttf   fontawesome-webfont.woff  fontawesome-webfont.woff2

$ ls node_modules/bootstrap/dist/fonts
glyphicons-halflings-regular.eot   glyphicons-halflings-regular.ttf   glyphicons-halflings-regular.woff2
glyphicons-halflings-regular.svg   glyphicons-halflings-regular.woff

There's no special configuration in the config/webpack files, as I said it just works in Webpacker 3.0.2

It seems like it's looking for the fonts starting at the project root and not relative to where the two imported css files are:

node_modules/font-awesome/scss/font-awesome.scss
node_modules/bootstrap/dist/css/bootstrap.css

Source

rhymes

Most helpful comment

Btw, I tried solution from mentioned by @gauravtiwari here https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader and I had to remove options: {attempts: 1}. It only works in this way for me:

// webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

anaumov on 19 Dec 2017

👍11 ❤1 🎉1 👎1

All 6 comments

We removed resolve-url-loader since it was adding overhead in build times for people who aren't using it. Please add resolve-url-loader to resolve relative assets: https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

gauravtiwari on 18 Dec 2017

It makes sense and it worked perfectly.

Thank you

rhymes on 18 Dec 2017

// webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

anaumov on 19 Dec 2017

👍11 ❤1 🎉1 👎1

@anaumov Yeah, the attempts option specifies how deep search it should do.

gauravtiwari on 19 Dec 2017

Breaking changes should not be released on MAJOR releases?