docs/bug?: Images in src/images can not be referenced in frontend/style.css

[Dahie]

Motivation

I'm playing with bridgetown. I created a fresh new site using bridgetown 0.19.2, added a few pictures to src/images/ and I can embed them in the frontend. I want to use one of the pictures as a background image of a style element.

Documentation says "You can reference them from both markup and CSS simply using a relative URL (for example, /images/logo.svg)."

So, I changed the default frontend/styles/style.scss and added

body {
  background-image: url('/images/background.png');
}

Now, I run yarn start and get this error when webpacker tries to compile the styles:

[Webpack] ERROR in ./frontend/styles/index.scss
[Webpack] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[Webpack] ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
[Webpack] Error: Can't resolve '/images/background.png' in '/…/new_site/frontend/styles'
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:209:21
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/Resolver.js:285:5
[Webpack]     at eval (eval at create (/Users/…/new_site/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
[Webpack]     at /Users/…/new_site/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
[Webpack]     at processTicksAndRejections (node:internal/process/task_queues:76:11)
[Webpack]     at /Users/…/new_site/node_modules/webpack/lib/NormalModule.js:316:20
[Webpack]     at /Users/…/new_site/node_modules/loader-runner/lib/LoaderRunner.js:367:11
[Webpack]     at /Users/…/new_site/node_modules/loader-runner/lib/LoaderRunner.js:233:18
[Webpack]     at context.callback (/Users/…/new_site/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
[Webpack]     at Object.loader (/Users/…/new_site/node_modules/css-loader/dist/index.js:154:5)
[Webpack]     at processTicksAndRejections (node:internal/process/task_queues:94:5)
[Webpack]  @ ./frontend/javascript/index.js 1:0-20

I run Ruby 3.0 on OSX 11.2

Suggestion

I don't know if this is a bug or if I misunderstood the documentation.

If it's the latter I'd like to know what I did wrong and help to find better wording in the docs.

Thanks for your help

[jaredcwhite]

Thanks for filing this issue…it turns out there was a bug! It was due to a breaking change between css-loader v3 and v4. I've authored a fix in PR #240. In the meantime, you can update your webpack.config.js file like so:

1. Find the line "css-loader", within the module rules for /\.(s[ac]|c)ss$/
2. Replace that line with this code:

          {
            loader: "css-loader",
            options: {
              url: url => !url.startsWith('/')
            }
          },

That should hopefully fix your problem.

[Dahie]

Awesome, thank you!

[Dahie]

Oh yeah, and it's working.