I'm using Vite 4.0.4 which uses this plugin for css modules.
I'm importing a classname from another module ("tree") and using it in a selector inside a module ("drawer"). This works just fine, as documented.
@value treeWrap from '../../tree/tree.module.css';
.navDrawer {
display: flex;
flex-direction: column;
& :global(.treeWrap) { /* <--- other submodule class referenced here */
background: var(--colors-white-01);
flex: 1;
padding: 0 10px;
}
}
The output CSS has the correct classes for this selector: ._navDrawer_g2fsx_4 ._treeWrap_18lce_1. The element has class="_treeWrap_18lce_1"
However, when I make changes to the referenced file tree.module.css and vite's dev mode is running, the connection between these two files is lost. Changes to the drawer.module.css file have no impact.
The classname changed and in the DOM my element now has class="_treeWrap_vuj93_1" yet my css style uses ._navDrawer_g2fsx_4 ._treeWrap_18lce_1, breaking all of the styles.
I'm using Vite 4.0.4 which uses this plugin for css modules.
I'm importing a classname from another module ("tree") and using it in a selector inside a module ("drawer"). This works just fine, as documented.
The output CSS has the correct classes for this selector:
._navDrawer_g2fsx_4 ._treeWrap_18lce_1. The element hasclass="_treeWrap_18lce_1"However, when I make changes to the referenced file
tree.module.cssand vite's dev mode is running, the connection between these two files is lost. Changes to thedrawer.module.cssfile have no impact.The classname changed and in the DOM my element now has
class="_treeWrap_vuj93_1"yet my css style uses._navDrawer_g2fsx_4 ._treeWrap_18lce_1, breaking all of the styles.