CSS files in custom components are deleted during build in Reflex >= 0.7.4, breaking style import
Describe the bug
Since Reflex version 0.7.4, when compiling the app, .css files (such as styles.module.css) inside the custom component folder are deleted from the .web folder, causing import errors in the JavaScript files that depend on them. This behavior didnβt occur in version 0.7.3.
To Reproduce
Steps to reproduce the behavior:
- Create a custom component using a
.jsfile and a correspondingstyles.module.cssfile. - Place them in the
assets/custom/components/ComponentName/folder. - Use the component in your app.
- Compile the app using Reflex version 0.7.4 or 0.7.5.
- Observe that the CSS file is briefly copied to
.web, then deleted. - The browser console shows an error due to the missing CSS import.
- Code/Link to Repo:
from typing import Union
import reflex as rx
class DragDrop(rx.Component):
library = "/public/custom/components/DragDrop/DragDrop.js"
tag = "DragDrop"
# This parameter must be named onFileDrop in the JavaScript code
on_file_drop: rx.EventHandler[lambda files: [files]]
background_color: rx.Var[Union[str, rx.constants.colors.Color]]
drag_drop = DragDrop.create
And the folder structure where the component is located is as follows:
project/
ββ assets/
β ββ custom/
β β ββ components/
β β β ββ DragDrop/
β β β β ββ DragDrop.js
β β β β ββ styles.module.css
Expected behavior
The CSS file should be preserved and properly copied to the .web folder during the build process, so the JavaScript component can import and apply the styles without error.
Screenshots
N/A (CSS file disappears silently, causing module not found errors)
Specifics (please complete the following information):
- Python Version: 3.11.8
- Reflex Version: Working in 0.7.3, broken in 0.7.4 and 0.7.5
- OS: Windows 11 using WSL2 with Debian
- Browser (Optional): Any modern browser (error occurs during build)
Additional context
Tried using add_imports() in the custom component to manually include the CSS file, but it didnβt solve the issue. The file is still deleted after appearing momentarily in .web.
Iβm also leaving the Discord link with the answers Ask Inkeep gave me, although none of them worked for me. Discord query link.
I had a similar issue with using rx.asset with the css file appearing and then disappearing:
https://discord.com/channels/1029853095527727165/1355930435393159368