cssAddon: true with Vite not working

[WillianPadilha]

What happened?

When activating cssAddon:true, in src/main.js Quasar does not import file quasar/src/css/flex-addon Example of config in main.js

const myApp = createApp(App);

myApp.use(Quasar, {
    plugins: ['Dialog', 'Loading', 'Notify'],
    lang: quasarLang,
    cssAddon: true,//this not work
    config: {
        notify: {
            color: 'primary',
            icon: 'info',
            timeout: 10000,
            actions: [{color: 'white', icon: 'close'}],
        },
    },
});

What did you expect to happen?

import 'quasar/src/css/flex-addon.<%= __css.quasarSrcExt %>'

Reproduction URL

https://github.com/quasarframework/quasar/blob/dev/app/templates/entry/client-entry.js#L38

How to reproduce?

1 - https://quasar.dev/start/vite-plugin Create a Project with Vite 2- add cssAddon:true in config of Quasar Use. Example

// FILE: main.js

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'

const myApp = createApp(App)

myApp.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
  cssAddon: true,// This config. don't working
  /*
  config: {
    brand: {
      // primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more (check Installation card on each Quasar component/directive/plugin)
  }
  */
})

// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

SPA Mode, PWA Mode

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge

Quasar info output

Operating System                Windows_NT(10.0.19043) - win32/x64
NodeJs                          14.17.5

Global packages
  NPM                           6.14.14
  yarn                          Not installed
  @quasar/cli                   1.2.1
  @quasar/icongenie             Not installed
  cordova                       Not installed

Relevant log output

No response

Additional context

No response

[rstoenescu]

We've made it clear in docs that setting cssAddons is a Quasar CLI feature, so it doesn't works with the flavours.

Notice "quasar.conf.js" there. That's available in Quasar CLI only.

For adding the cssAddons with our Vite or Vue CLI plugin, you need to manually import it:

// Import Quasar css
import 'quasar/src/css/index.sass'
import 'quasar/src/css/flex-addon.sass'

[bhattasuraj76]

Thanks a lot. Manually importing worked for me.