Errors using Quasar with webpack-encore

  • 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?

  • 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'
    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 )))

Log in to reply