Cannot reference images from staticDirectories in custom.css

[Domiii]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The css file defined in theme.customCss tries to reference an image from staticDirectories, but it cannot find it.

Steps to reproduce

Setup new config:

• Set baseUrl - e.g. myProject
• Add some folder to staticDirectories - e.g. path.resolve(__dirname, '../img')
• Place an image inside that folder - e.g. img/myImg.png
• Add theme.customCss inside presets -> classic - e.g. custom.css
• Verify that http://localhost:3000/myProject/myImg.png exists
• Inside custom.css, reference /myProject/myImg.png
  • e.g. content: url(/myProject/myImg.png);
  • e.g. content: url(myImg.png);

-> None of these work.

Expected behavior

I understand why this errors out. I don't necessarily expect it to work.

But I would expect to somehow be able to reference images using a non-relative path.

Actual behavior

It complains that it cannot find the image:

ERROR in ./src/css/custom.css

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'myImg.png' in '/docs/src/css'
    at finishWithoutResolve (/docs/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:362:15
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /docs/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/docs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /docs/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at processResult (/docs/node_modules/webpack/lib/NormalModule.js:751:19)
    at /docs/node_modules/webpack/lib/NormalModule.js:853:5
    at /docs/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /docs/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/docs/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/docs/node_modules/css-loader/dist/index.js:155:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Your environment

• Public source code: https://github.com/Domiii/dbux/blob/b7a2cdcd659a87041ebeff83217c3d0580e304e6/docs/docusaurus.config.js
• Public site URL: (not deployed yet)
• Docusaurus version used: 2.0.0-beta.13
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node@16+, Chrome (evergreen)
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Reproducible demo

No response

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi, I'm surprised that you tried two options but not an obvious third: /myImg.png.

So the Webpack resolver works like this:

• When it sees a relative path like myImg.png, it resolves that from the current directory. And the image can't be found in /docs/src/css.
• When it sees an absolute path like /myProject/myImg.png, we have configured it to look up in the following places:
  • Static directories.
  • Site root.
  • The process's CWD, which is very likely the same as the previous one.

Note that all paths here are file paths. They are NOT URL paths. That means Webpack tries to find a subfolder called myProject/ containing an image, which it can't find.

Even if you understand the paths as URLs—that's fine! They behave just like URLs, but remember that base URLs are omitted when referencing URLs because they are considered implementation details and can be easily changed. We have mentioned in our docs that you should pretend like you don't know your site's base URL, or that it's /.

Could you try /myImg.png and see if that works?

[Domiii]

@Josh-Cena Indeed it works! Thanks a lot!

I also like the idea that baseUrl is always taken care of internally. Thanks for the elaborate response and even a quick documentation PR. Much appreciated!