Can't override external CSS without !important

[rmarren1]

Not really a bug, just something I noticed that we should be aware of.

In the new assets directory approach to including CSS, external stylesheets always appear beneath local stylesheets.

There doesn't seem to be a way to switch this (at least that I'm aware of), so a user can't override CSS from external libraries without !important since external scripts will always be imported last and thus take precedence. I think this is a very common use case (e.g. import bootstrap, then add your own CSS to customize a small part of bootstrap) and users shouldn't have to manually add !important to all their stylesheets or change the specificity of selectors to get it to work.

[rmarren1]

@T4rk1n

[T4rk1n]

I'll change the assets to go after external.

[chriddyp]

I'll change the assets to go after external.

Yeah, that seems like it would be the right default behaviour.

[chriddyp]

And if the user really needs to customize it, then they can override the index

[rmarren1]

Is that possible right now? I tried but it looks like external and local css are imported as one chunk without an option to order them:

dash/dash/dash.py

Line 438 in 7361db5

index = self.interpolate_index(

[T4rk1n]

No, it's not possible to reorder right now, I want to change the generate_html methods to be separate from the resources collection and give raw resources list to interpolate_index instead.