How to use a css framework used along side?



  • 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?



  • 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.



  • 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.)



  • Have you looked at Quasar plugins?



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



  • 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).