Quasar App CLI 1.1.0 Released

More features, adding to the already great dev experience!

tl;dr; If you already know what Quasar is all about and you understand what the App CLI is, please drop down to the “What’s New?!” section below.

Right now, some of you might be going, “Hey…wait a second! Quasar was just released as 1.1.0!”. If you are thinking this, then you are absolutely right!

Let’s explain. Quasar has two main realms of functionality as a framework:

Quasar is more than just a component library. Much more!

The Quasar CLI — a vast and powerful dev and a build environment for cross-device application development and distribution.

The Quasar UI — This is what we call the huge high-quality component library within Quasar.

The last 1.1.0 release was for the Quasar UI (release notes). And by the way, Quasar is now at 1.1.1 and this version is needed for the new Sass support to work.

And, there’s more! The CLI itself also has two parts.

1. The “Global CLI” (@quasar/cli — which is optional), for doing things like creating projects and serving up app distributibles locally with an ad-hoc webserver.

2. The “App CLI” (@quasar/app), for doing most of the things you need to do within a Quasar app project, like offering the dev server environment (for HMR and a lot more!), adding boot or component file templates to your project or describing APIs for components and of course, the most important part, building out your project to the multiple environments Quasar supports (i.e. Web, PWA, Web+SSR, PWA+SSR, Cordova, Electron, etc.).

As you can see, Quasar is a very powerful framework for frontend development, especially for supporting cross-device code reuse.

With this release, we are updating the 2nd part of the CLI. The App CLI.

What’s New?!

In this release, we have two new great features we are excited to offer the Quasar community.

1. Quasar now fully supports Sass CSS by processing both .scss and .sass file types!

2. No more having to remember to enter your used components or directives inside Quasar’s configuration file quasar.conf.js. Quasar now does it automatically for you, if you configure it to do so!

Let’s dig into more of the details of each new feature.

Sassy Quasar

That’s right! Quasar now also supports Sass and .sass and .scss file processing.

It doesn’t matter what survey you may run into, all of them show the propensity of developers to lean toward using Sass as their go-to CSS processing system. Quasar is following that trend.

Image from https://2019.stateofcss.com/technologies/

The cool thing is though, if you know Quasar, you also know about Quasar’s style variables. And these variables are also available within your Sass CSS too!

Although Quasar supported Sass even before this change, now Quasar’s complete CSS system can be Sass only, if you so wish to use Quasar that way.

In other words, Quasar (through @quasar/app) now supports src/css/quasar.variables{.sass|.scss} file, which you can use to extend or change the default Quasar variables. When that file exists in a project folder, it will automatically make your changes available in your <style lang="scss"> or <style lang="sass"> too respectively. But, even if the file is missing, you’ll still be able to access the default variables.

There is only one common-sense caveat: adding your custom variables to quasar.variables.styl will make them available only in every .vue(lang=“stylus”) or .styl file, but it will not make them available in any .vue(lang=“scss”/lang=“sass”) or .scss/.sass files. You’ll need a quasar.variables.{scss|sass}file for this. The same rule goes in the other direction too.

After 1.1.0, it will be possible to have Quasar’s style source in the form of Sass and can also be used seamlessly with SCSS too. And Quasar’s App CLI will support Stylus and Sass/SCSS out of the box. That means, no additional packages will need to be installed for Sass/SCSS, as was the case in previous Quasar versions.

Also, when creating a new project in Quasar, the CLI will now ask you what CSS processing system you’d like to have for that project.

Now you can choose Sass as your CSS processing system.

One last thing. Unbelievable as it may be, the addition of Sass was implemented without any breaking changes.

Automated Config

It’s a long-standing issue with devs about having to remember to add the components they use from Quasar within the quasar.conf.js file. It’s also often a simple fix to a common support issue.

There is the well-known all feature, which allows a dev to disregard adding used components for development purposes. The all feature basically included all components, directives, and plugins. However, and at the latest when the app is ready to be built, the dev would have to figure out what components and directives she had actually used and update the quasar.conf.js file accordingly. All of this was necessary to allow Quasar to tree-shake the code and build the smallest package possible.

Now, with App CLI 1.1.0, Quasar will automatically scan your code for components and directives used within your Quasar app and add the necessary entries into the quasar.conf.js file. Unfortunately, for technical reasons, plug-ins couldn’t be added, but there is a much, much smaller list of plug-ins, compared to components. This addition is a valuable and time and effort saving enhancement for you, as a developer.

You can select how you want Quasar to import. But, who wouldn’t want it automated?

We do believe this new feature will add to the already great developers experience Quasar offers and shows, one of the main intentions of Quasar…

A great developer experience.

The Full List of Updates in the App CLI 1.1.0 Release

New Features

• Sass/SCSS support #5049 (/src/css/quasar.variables.scss support, /src/css/quasar.variables.sass support, Quasar variables available even if app-space override file is missing, Supply node-sass and sass-loader out of the box)
• If no css/ variables file exists, hook directly into Quasar’s built .css file #5049
• Auto import Quasar components and directives; quasar.conf.js > framework > all: ‘auto’
• Boot files new params: urlPath and redirect(); enhance docs
• Small tweak to “setting port to nearest available” banner

Fixes

• “describe” command on quasar conf options
• Disable watchContentBase to avoid triggering unwanted errors #5026
• Allow Cordova to set target “electron” #4941 (will work when Cordova-electron v1.2 is released)

We hope you are as excited as we are about these new features to the App CLI.

Let us know what your impressions are about this release and the new features. We always welcome constructive feedback.

If you want to learn more about Quasar:

The Quasar website: https://quasar.dev
GitHub: https://github.com/quasarframework/quasar
Getting Started: https://quasar.dev/start
Discord Chat Server: https://chat.quasar.dev
Forum: https://forum.quasar.dev
Twitter: https://twitter.quasar.dev
Facebook: https://facebook.quasar.dev
Donate: https://donate.quasar.dev