Stylus syntax - where do imports come from?

Question

I've got a file called "quasar.styl":

@import './quasar.variables'
@import '~quasar-styl'

When it gets processed by webpack, using styl-loader, I get this error:

failed to locate @import file ~quasar-styl.styl

I have this feeling there's something about stylus I don't understand. Where would it be looking for the file "~quasar-style"?

This file comes from a working boilerplate quasar app, and there isn't a file called quasar-style anywhere in the app directories, especially not is node_modules, which is where I gather the tilde tells it to look.

Any ideas?

UPDATE: I uploaded the quasar boilerplate project here: https://repl.it/@jmbldwn/Quasar-Boilerplate-2

It's not runnable on repl.it because it needs the quasar-cli, but you can see all of the files generated by it there.

Regretful

This is most likely related to the stylus-loader. Can we have a look at that boilerplate? – Collotype

@jim have same issue, after installing quasar and replace the vue generated App, Home, etc. after finishing install it tells me that it cant find the ~qasar-variables-style.styl and ~quasar-styl.styl. did you solve it already? – Susie

I didn't find a solution. Decided to table the effort in favor of a different UI framework (vuetify) which doesn't depend on it's own CLI. Maybe I'm old-school. – Regretful

I just wasted 2 hours on this. Obscure naming with no explanations anywhere. – Chant

Answer 1

I am using vue3 + vite + quasar Same problem when tring add quasar to project, after run

vue add quasar

I just comment out the two lines ( maybe added by vue cli automatically, which is not correct)

in styles/quasar.variables.sass

//@import '~quasar-variables-styl'

and in styles/quasar.sass

// @import '~quasar-styl'

And then add quasar main sass import to main.js

import "quasar/dist/quasar.sass"

And I got fixed.

Woodbury

Answer 2

I just got a fix to this problem, which happened to me when running $ npm install in a new clone, followed by $ npm update, followed by $ vue upgrade.

Note: I had installed the Vue CLI Quasar Plugin version of Quasar, and my quasar.js configuration file begins with

import Vue from 'vue';
import '@/styles/quasar.styl';

Solution

1. In your src/styles/quasar.variables.styl file, remove the line @import '~quasar-variables-styl', which should be close to the bottom.

2. In your src/styles/quasar.styl file, replace the line @import '~quasar-styl' with @import '~quasar/dist/quasar.styl'.

Cologne

Answer 3

I just fixed this error by importing @import url("quasar/dist/quasar.sass")

in my quasar.variables.scss file

 It's highly recommended to change the default colors
to match your app's branding.

$primary   : #027BE3;
$secondary : #26A69A;
$accent    : #9C27B0;

$dark      : #1D1D1D;

$positive  : #21BA45;
$negative  : #C10015;
$info      : #31CCEC;
$warning   : #F2C037;

@import url("quasar/dist/quasar.sass")

Illegible