styles required with relative path leading to /src are not applied

Do you want to request a feature or report a bug? bug, or configuration issue probably

What is the current behaviour? see header? has no class

If the current behaviour is a bug, please provide the steps to reproduce.

• preact create default my-project
• copy src/components/header/style.css to src/
• edit src/components/header/index.js to point to the new path ../../style.css
• preact watch

What is the expected behaviour? header styles being applied, header background being violet e.g.

Please mention other relevant information.

the compiler finds the file, you can verify this by renaming it, but the styles are not applied to the dom (actually the styles are inserted, but the class name not).

Is this because of ../../? No, I verified this by adding one more folder in depth and then going back 2 folders relative and it works. It only fails once the path leads to src/, or further up from there: ../../test/style.css

Please paste the results of preact info here. System: OS: Windows 10 10.0.18362 CPU: (4) x64 Intel® Core™ i7-8559U CPU @ 2.70GHz Binaries: Node: 13.8.0 - C:\Program Files\nodejs\node.EXE npm: 6.13.6 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.387.0

[rschristian]

CSS files imported from /components and /routes are the only ones treated as CSS modules. Importing from outside of those two means the CSS file isn’t a module. You can test this by changing <header class={style.header}> to <header class="header">. The purple header will be back.

Depending on what you want to do, you can customize the Webpack config using your preact.config.js (config to change can be found here) to work with any directories that you want.

This is only turned on for /components and /routes so you can use the other directories to import styles globally, such as index.js importing styles/index.css. I think it’s usually standard practice to keep your CSS file close to your component when using modules to cut down on the amount of searching you have to do, hence these defaults, but you should be free to change them if you wish.

[rschristian]

No, inline styling is just for writing CSS as JS. Obviously you can still import style sheets and use classes, but in a component, you only get standard CSS (in a JS naming convention).

If you added Less/Sass into the mix you’d have to somehow pre-process a component, which would get all sorts of complicated if not impossible.