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
    elements.scss
    pages.scss
    typography.scss
    chat.scss

    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: [
          'app.scss',
          'styles.scss'
        ],
    

    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:

    <template>
       <div class="row">
            <table class="bootstrap_class">
                <q-component></q-component>
            </table>
            <div class="bootstrap_class>
                <q-component></q-component>
                <q-component></q-component>
            </div>
        </div>
    </template>
    

    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