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