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 3.- cd 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.