rails webpacker で node_modules の css 読み込み

rails webpacker で node_modules の css 読み込む方法

例えば、node_modules/jquery-ui-dist/jquery-ui.css
があるとして

application.scss から

@import "~jquery-ui-dist/jquery-ui";

のように読み込む、
~ は、node_modulesの位置を示すために必要

この時、css から ./image が読めない、というエラーがでる。

これに対応する方法は

% yarn add resolve-url-loader

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',
options: {
attempts: 1
}
});

Resolve url loader
https://github.com/rails/webpacker/blob/76b491750993fada8b0b0cc2546dfcfbc4aaae13/docs/css.md#resolve-url-loader

以下で議論されてた
Import images of an npm package with Webpacker and Rails
https://stackoverflow.com/questions/58727976/import-images-of-an-npm-package-with-webpacker-and-rails