How to use a css framework used along side?

[Zeitvertreib]

I’d like to port some HTML that is styled with bulma into my quasar project.
All I did was installing bulma with node. (npm i bulma -S) and imported it in the script tag from the related component.

<script>
import 'bulma/css/bulma.css'
export default {
...
</script>

And it works for styling the elements in the component. But somehow it interfered with the styles of q-route-tab (alignment of the set icon attribute) in another component. (removing the import sets the interfered alignment back to default in the other component. )

So I think the import there is the wrong approach. Whats a better/ right way?

[genyded]

Well… in the end it’s CSS and the C is for CASCADING, so if any two css classes/rules have the same name, or reference the same element(s) the last one loaded wins.It sound like that may be what’s happening here. It can be a bit of a pain, but if you can find the conflict (F12 in the browser is your friend), you can set whichever you really want at the component/element level and that one would apply. Another side effect of the frameworks world gone wild.

[Zeitvertreib]

Yep, I know. So I first of all need another way to import it. (because I can’t even scope it the way I did it.)

[genyded]

Have you looked at Quasar plugins?

[ein]

@genyded I am not sure what to look for in the Quasar plugins section – what am I missing?

[genyded]

Check this post fro an exmaple of how to import a CSS file in a Quasar plugin (that example loads it from node_modules), but it could be from anywhere outside you compilation path since if it’s in the compilation path, webpack will process it).