VUE CLI + Flex Addons
-
@s-molinari Thanks for trying!
CSS properties described here. They do not work.
https://quasar.dev/layout/grid/introduction-to-flexbox#Flex-Addonsq-pa-sm-lg
items-sm-center
etc. -
Can you show your whole vue.conf.js file?
Scott
-
module.exports = { runtimeCompiler: true, pluginOptions: { quasar: { importStrategy: 'manual', rtlSupport: false, framework: { cssAddon: true, }, }, i18n: { locale: 'en', fallbackLocale: 'ru', localeDir: 'locales', enableInSFC: true, }, }, transpileDependencies: [ 'quasar', ], };
-
I just tested it. It seems the addon is added without the entry in the config.
What are you using from the Flex Addon that you aren’t seeing? I just tested q-pa-md and xl and they worked.
Scott
-
One other small difference I have is
importStrategy
is set tokebab
.Scott
-
@s-molinari
q-pa-md and xl always worked.The properties described here do not work.
https://quasar.dev/layout/grid/introduction-to-flexbox#Flex-Addons -
Can you give me some code you are using to test with? If q-pa-md worked, then everything else should work. It’s all the same addon.
Scott
-
He’s talking about the flex addons eg.
q-pa-md-[width/sm/md/etc.]
.@arogonov can you check the cdn/at quasar node_module folder of the css instead and import it in your src/quasar.js.
tested just now and it’s working, so yeah just import it. like this:
import 'quasar/dist/quasar.addon.css'
in yoursrc/quasar.js
file, then you should see it working. -
Ah. See, I didn’t even realize what <bp> meant until just now. Sorry about that.
I’d still like to see some example code, just for my own curiosity, if it isn’t asking too much.
Scott
-
i don’t use it tbh, though kinda useful now that i got the chance to test it. i just did something like this to test the effect.
<div class="row q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md bg-orange-1"> <div class="text-h6 bg-blue-1">Hello world</div> </div>
it’s a screen size aware css using media queries as you seen in the pic above. it’s a very large css file (5122 lines unminified) like the warning in the docs said, one of the reason why i don’t use it.
-
This was said by Dan, who is one of the devs, on the subject on Discord (was a coincidence a the subject of the CSS addons was being discussed).
you shouldn’t use the flex addons - it’s a huge css and in most cases the size never changes:
- mobiles have only 2 widths, and it doesn’t change so frequent
- desktops can change more frequently, but have a lot more processing power
try to use computed classes based on the screen plugin
Scott