How to use custom scss?

  • Hello … Good night.
    Before starting quasar, I was using a ready-made, purchased bootstrap template, I really don’t have a talent for creating interfaces like the template I bought. My question is: How can I import the template CSS purchased to use with the quasar?

    I tried it like this: I put all my *.scss files inside the css/import directory

    css/import —> Dir. created

    I created styles.scss file into css directory and did the following:

    @import "import/typography";
    @import "import/pages";
    @import "import/chat";
    @import "import/elements";

    I deleted node_modules, run ‘yarn install’ …
    In the file quasar.conf.js I did the following:

    css: [

    When run ‘quasar dev’ gives a lot of error and does not work …
    How to do this correctly?

    Thank you.

  • bootstrap templates are not compatible with Quasar’s components. Actually no css framework is. ( maybe Tailwind when they fix the class names).

  • @dobbel

    I don’t want to use the bootstrap classes on the components, I want to use the classes on the pages … Example:

       <div class="row">
            <table class="bootstrap_class">
            <div class="bootstrap_class>

    How can I do that?

  • Does it work if you put the import statements in ‘app.scss’ instead. That’s what I usually do to add ‘global’ classes. What errors are you getting?

  • Hello @dannyalder88. I apologize for the delayed response. I’m doing it now and it’s working, I’m putting the classes I want in app.scss. Thank you.

  • @gvillela7 that’s very nice you have it working. I am wondering what does the combination of Bootstap and quasar components look like? They play along nicely?

Log in to reply