Developing Electron Apps

Misc

App Pre-Processors & Webpack

The build system uses Webpack to create your website/app. Don’t worry if you aren’t acquainted with Webpack. Out of the box, you won’t need to configure it because it already has everything set up.

However, for cases where you need to tweak the default Webpack config you can do so by editing /quasar.conf.js and configuring build > extendWebpack (cfg) method or (CLI v0.16.2+) build > chainWebpack (chain).

Notice that you don’t need to return anything. The parameter of extendWebpack(cfg) is the Webpack configuration Object generated by Quasar for you. You can add/remove/replace anything from it, assuming you really know what you are doing.

Let’s discuss about Webpack loaders now. It’s probably where you’ll make the most additions.

Webpack Aliases

Quasar comes with a bunch of useful Webpack aliases preconfigured.You can use them anywhere in your project and webpack will resolve the correct path. If you want to add you own alias, se the section about adding your own alias to Webpack.

Alias

Resolves to

quasar

node_modules/quasar-framework/dist/quasar.<configured-theme>.esm.js

src

/src

components

/src/components

layouts

/src/layouts

pages

/src/pages

assets

/src/assets

plugins

/src/plugins

variables

/.quasar/variables.styl

Also if you configure to build with the Vue compiler version (build > vueCompiler: true), vue$ resolves to vue/dist/vue.esm.js.

Webpack Loaders

The build system uses Webpack, so it relies on using webpack loaders to handle different types of files (js, css, styl, scss, json, and so on). By default, the most used loaders are provided by default.

Installing loaders:

Let’s take an example. You want to be able to import .json files. Out of the box, Quasar supplies json support so you don’t actually need to follow these steps, but for the sake of demonstrating how to add a loader, we’ll pretend Quasar doesn’t offer it.

So, you need a loader for it. You search Google to see what webpack loader you need. In this case, it’s “json-loader”. We first install it:

$ yarn add --dev json-loader# or:$ npm install --save-dev json-loader

After installing your new loader, we want to tell Webpack to use it. So we edit /quasar.conf.js and change build.extendWebpack() to add entries to module/rules for this new loader:

SASS/SCSS support

So you want to be able to write SASS/SCSS CSS code. You need a loader for it. We first install it. Note that for this particular case you also need to install node-sass because sass-loader depends on it as a peer dependency.

Coffeescript

If you are using Coffeescript then you need to EITHER disable ESLint OR tell ESLint which Vue components are using Coffeescript.

Note that vue-loader uses lang="coffee" to identify components which are using Coffeescript, but lang="coffee" is not recognizable for ESLint. Fortunately, ESLint (following traditional HTML) uses type="xxx" to identify the type of scripts. As long as a <script> tag has any type other than javascript, ESLint would mark the script as non-javascript, and skips linting it. Coffeescript’s convention is to use type="text/coffeescript" to identify itself. Therefore, in your Vue components which are using Coffeescript, using both lang and type to avoid ESLint warnings: