Problem in use component

[SadovovAlex]

I have a problem.
Create default app from vue-cli 3.0.0

npm install quasar-calendar
npm install quasar-framework
npm install --save quasar

npm run dev

vue-cli-service serve

INFO Starting development server...
94% after seal

ERROR Failed to compile with 13 errors 12:21:48
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.
Failed to resolve loader: stylus-loader
You may need to install it.

[SadovovAlex]

if i add
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2"

` INFO Starting development server...
94% after seal

ERROR Failed to compile with 8 errors 12:29:56
error in ./node_modules/quasar-calendar/src/components/calendar/CalendarAgendaEvent.vue?vue&type=style&index=0&lang=stylus

Module build failed (from ./node_modules/stylus-loader/index.js):
Error: Front\node_modules\quasar-calendar\src\components\calendar\calendar.vars.styl:1:9
1| @import '~variables'
--------------^
2|
3| $sevenCellWidth = 14.285%
4| $cellHeight = 8em

failed to locate @import file ~variables.styl
`

[arieltoledo]

Why would you install in that order ?
1.- npm install -g quasar-cli
2.- quasar init <folder_name>
3.- cd <folder_name>
4.- npm install quasar-calendar
5.- quasar dev

[sirbeagle]

@SadovovAlex The best thing I can recommend is to look at the Quasar theming page that discusses the use of @import '~variables' - I'm using the import just like they mention there.

[holzhey]

Maybe it can help: i'm using Quasar in a Laravel based solution and used code below in webpack.mix.js

.webpackConfig({
        resolve: {
            alias: {
                'quasar-framework': path.resolve(`node_modules/quasar-framework/dist/quasar.mat.esm.js`),
                'quasar': path.resolve(`node_modules/quasar-framework/dist/quasar.mat.esm.js`),
                'quasar-variables': path.resolve(`node_modules/quasar-framework/dist/core.variables.styl`),
                'variables.styl': path.resolve(`node_modules/quasar-framework/dist/core.variables.styl`),
                'quasar-stylus': path.resolve(`node_modules/quasar-framework/dist/quasar.mat.styl`)
            }
        }
    })

You can modify the aliases to meet your environment. quasar-calendar are using the quasar and variables.styl entries. If you read the Quasar theming page, in the code is written "variables" is a Webpack alias (provided out of the box by Quasar CLI)... so, if you are not using quasar-cli you must set the aliases to match.