Closed kimyu92 closed 2 years ago
@guillaumebriday this seems to be a doc issue, as rails/webpacker code is just for the simple cases.
This seems to be related to resolve-url-loader
instead of webpacker upgrade.
However, for those who encounter issue using resolve-url-loader >= 3 to import images in scss file,
I ended up using solution here where I create an alias for image directory in webpack custom.js
and then instead of using relative path, I point it to url('~images/x.png')
const path = require('path');
module.exports = {
resolve: {
alias: {
images: path.resolve(__dirname, '../../app/assets/images'),
},
},
};
To resolve bootstrap-sass glyphicon issue, credit: https://github.com/maxmx/bootstrap-stylus/issues/129
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
Thanks, @kimyu92! This is a useful tip!
I believe it's quite common to use
resolver-url-loader
to ensure the relative path of image is working in scss. However, it seems like I can't find any documentation in the upgrade guide that talks about this particular changes.Error
Error 1: Failed to resolve image path used in scss (Resolved)
Error 2: Similar to issues, https://github.com/rails/webpacker/issues/1267 & https://github.com/rails/webpacker/issues/1119, after upgrading to webpacker 6, it failed to resolve bootstrap glyhicons with previous workaround mentioned in https://github.com/rails/webpacker/issues/1119#issuecomment-352738508
Folder structure
Webpack config
System
Update
To resolve relative image used in scss
/config/webpack/base.js
const customConfig = { context: path.resolve(__dirname, '../../app/javascript'), // Default webpacker setup, old setup was app/javascripts, this is the value from webpacker.yml "source_path" // ...rest of your customConfig goes here }
// you may need to update relative path in scss as well, eg. update url('../assets/...') to url('../../assets/..')