No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to use custom scss?

    Framework
    css quasar cli scss
    3
    6
    2113
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gvillela7 last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by dobbel

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

        G 1 Reply Last reply Reply Quote 0
        • G
          gvillela7 @dobbel last edited by

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

          1 Reply Last reply Reply Quote 0
          • D
            dannyalder88 last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • G
              gvillela7 last edited by

              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 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @gvillela7 last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post