link tag to stylesheet in nested folder not working

[HackbrettXXX]

Describe the bug Link tags in the index.html file that point to a CSS file in a nested folder aren't included when starting the app:

<link rel="stylesheet" href="./style/style.css" />

To Reproduce Steps to reproduce the behavior:

1. Download and extract this minimal project: wmr.zip
2. Run npm install
3. Run npm start
4. Open the app in a browser

Expected behavior The background of the page should be green due to this CSS rule in the public/style/style.css rule:

body {
  background: green;
}

Instead, the background is white because the stylesheet is not loaded. There are no errors on the browser or node console.

Bug occurs with:

• [x] wmr or wmr start (development)
• [ ] wmr build (production)
• [ ] wmr serve

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Node Version: 14.17
• WMR Version: 3.7.2

[rschristian]

Remove the leading . and it should work:

<link rel="stylesheet" href="/style/style.css" />

[HackbrettXXX]

Thanks for the answer. Unfortunately, this also doesn't work.

When I open style.css in the devtools, it shows me this:

import { style } from '/_wmr.js';
style("/style/style.css?asset", "..\\style\\style.css");
const styles = {};
export default styles;
import { createHotContext } from '/_wmr.js';
createHotContext(import.meta.url).accept(({ module: { default: s } }) => {
for (let i in s) styles[i] = s[i];
});

Intuitively, this looks suspicious to me:

style("/style/style.css?asset", "..\\style\\style.css");

Not sure what the second path is for, but the .. (and maybe Windows-style path separators) look wrong.

[rschristian]

Ah darn, sorry. I thought I remembered some issue like that on Windows, though perhaps I'm misremembering (or that's just no longer an issue). Apologies for that.

Looks like we're letting it slip through as a non-posix path. The .. is fine.