Errors using Quasar with webpack-encore

kuazaar

Good day to everyone!

I’m doing first steps with Quasar, and for this time I have another good question.
I’m using Symfony, Webpack encore, so I want to use it in this way (as vue-cli app)
I used to try vue create testapp / vue add quasar (according to documentation), used to try yarn add quasar (according to some guides and issues from google), and I ALWAYS get some stupid errors
Are there anybody, who knows, how to use Quasar with webpack encore?

The most lucky strike was creating a vue app and adding Quasar. But, during the build I’m getting an error:

webpack is watching the files…

 ERROR  Failed to compile with 1 errors                                                                                                                                                          11:09:45 PM

 error  in ./testapp/src/styles/quasar.sass

SassError: File to import not found or unreadable: ~quasar-variables-styl.
        on line 15 of testapp/src/styles/quasar.variables.sass
        from line 1 of testapp/src/styles/quasar.sass
>> @import '~quasar-variables-styl';

   ^


 @ ./testapp/src/quasar.js 2:0-30
 @ ./testapp/src/main.js

What am I doing wrong?

kuazaar

UPD.
After hours of experiments and searches in Internet, FINALLY, I’ve made it working.
Unfortunately, the documentation doesn’t provide any how-to about how to plug it in situations like this. Hope Quasar Team will do it!

The working main.js file is here:

import Vue from 'vue'
import App from './components/App.vue'
import Quasar from 'quasar';

import 'quasar/dist/quasar.styl'
import iconSet from 'quasar/icon-set/ionicons-v4.js'
import lang from 'quasar/lang/ru.js'
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'
import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
import '@quasar/extras/ionicons-v4/ionicons-v4.css'
import '@quasar/extras/mdi-v4/mdi-v4.css'
import '@quasar/extras/eva-icons/eva-icons.css'

Vue.use(Quasar)
new Vue({
    el: '#q-app',
    render: h => h(App),
})

Hope it’ll help somebody. Just exclude things you don’t need and change the language according to your project.
Thanks for no answers )))

No More Posting New Topics!

Errors using Quasar with webpack-encore