Might be a false alarm. I was probably importing the wrong path:

@import '../../node_modules/package/package.css'

I’m not sure if the packages I added with Yarn are needed or if this works straight out of the box.

Is there a shorthand way to access the node_modules directory, I wonder?

I’m using a package that has a css file and I’m trying to import it in app.styl like so:

// app.styl
@import 'package/package.css'

When I build I get the error:

“The dependency was not found…” And this long error message contains references to css-loader, postcss-loader and stylus-loader.

How do I configure the quasar stylus loader to process simple css files in app.styl? I can’t figure it out. I have tried the following:

yarn add --dev css-loader postcss-loader node-css

//quasar.conf
cfg.module.rules.push({
    test: /\.css$/,
    loader: 'postcss-loader'
 })

The above code does not work.

For the moment I can bypass the problem by creating a styl file from the package’s css.

Cheers. I’m not sure if that package handles desktop applications though. Browsers don’t have access to desktop idle time and that’s important for my needs (it’s an electron app). Maybe it does support desktop platforms but they don’t seem to mention it.

My above solution seems to work well so far.

@metalsadman thank you. The throttling seems a bit excessive in this forum. Bloody askimet. Reminds me of WordPress.

Loving quasar though. Will update this post if I find a better way to use Electron packages.

I’m trying to fix the spacing in my code above but “content flagged as spam by Askimet??”

I made some progress…

Here is my electron-main.js file. My code is highlighted as MYCODE. It’s mostly the default electron-main.js file:

import { app, BrowserWindow } from 'electron'

// **MYCODE**: 
//  I don't think import works for this package but require does
var desktopIdle = require('desktop-idle');

/**
 * Set `__statics` path to static files in production;
 * The reason we are setting it here is that the path needs to be evaluated at runtime
 */
if (process.env.PROD) {
  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
}

let mainWindow

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    useContentSize: true
  })

  mainWindow.loadURL(process.env.APP_URL)

  // **MYCODE**: 
  // Is this how we communicate with Vue??
  // Send the idle time to our web renderer every three seconds
  // I will check within my app for this message
  setInterval(function(){ 
    mainWindow.webContents.send("set-idle-time", desktopIdle.getIdleTime()); 
  }, 3000);

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Then within any component or page component I can do this:

mounted: function() {

  if (this.$q.platform.is.electron) {
    
    this.$q.electron.ipcRenderer.on('set-idle-time', (e, time) => {
        
       console.log(time);

    })}
}

This works fine but please let me know if any body knows of a nicer or cleaner way to load electron only packages.

I’m building an Electron app and I want to use this Electron package:
https://github.com/bithavoc/node-desktop-idle

This package is specifically made for node / electron so the code will not work on a regular single page app.

My question is, how do I require and use this package in Electron mode only? Electron is completely new to me so I have no idea. I’m hoping there’s any easy way to define Electron packages in quasar.conf but I can’t figure it out.

Thank you.

Any update on this? I get choppy performance on the first click on my app, which uses sliding transitions on the router. The first transition stutters quite a bit, but after that things are much smoother. Quasar v0.17.17

I can’t see an easy way to do it using component properties, so this is what I am using instead:

.q-if-label {
    color: #FFF;
}

.q-if::before {
   border-color: #FFF;
}

I’ve updated the answer by @Zyme for the current version of Quasar (0.17.17)

<q-page-container>

    <transition appear enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" mode="out-in">
        <router-view />
    </transition>

</q-page-container>

Note that mode=“out-in” is important. Don’t forget to add these animations to quasar.conf:
https://quasar-framework.org/components/transition.html