How to use custom scss?

gvillela7

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.

dobbel

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

gvillela7

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

dannyalder88

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?

gvillela7

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.

dobbel

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