Webpack alias in quasar.conf.js .15+

  • Im tryng to define some webpack path aliases…

    Tried in extended webpack conf , and in root of object return.
    Nothing works.


    let path = require('path')
      build: {
          scopeHoisting: true,
          vueRouterMode: 'history',
          // gzip: true,
          // analyze: true,
          // extractCSS: false,
          // useNotifier: false,
          extendWebpack (cfg) {
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules|quasar)/
            cfg.resolve.alias = {
              '@components': path.resolve(__dirname, './src/components'),
              '@helpers': path.resolve(__dirname, './src/helpers'),
              '@module1': path.resolve(__dirname, './src/domains/module1),

  • Great! thanks!

  • Awesome!

  • Additional to this, if you use VS Code and want CTRL + click - open the import file using alias.

    Create a jsconfig.json in root folder of project and :

        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
                "~/*": ["./src/*"],
                "@components/*": ["./src/components/"],
                "@helpers/*": ["./src/helpers/*"],
                "@module1/*": ["./src/domains/module1/*"],

    Reboot VSCode

  • The Pycharm IDE does not recognize the ‘quasar’ alias and thus gives a warning (‘quasar module not imported’). I tried to make the alias explicit in webpack by doing in quasar.conf.js:
    cfg.resolve.alias = {
    ‘quasar’: path.resolve(__dirname, ‘/node_modules/quasar-framework/dist/quasar.mat.esm.js’)

    but i get:

     app:quasar-conf Reading quasar.conf.js +978ms
     app:dev Checking listening address availability ( +3ms
     app:quasar-conf Generating Webpack config +5ms
     app:quasar-conf Extending Webpack config +13ms
     app:generator Generating Webpack entry point +2ms
     app:dev-server Booting up... +2ms
     ERROR  Failed to compile with 19 errors22:00:51
    This dependency was not found:
    * quasar in ./.quasar/quasar.js, ./src/api.js and 17 others
    To install it, you can run: npm install --save quasar

    Anyone knows how to get rid of the warning (not using eslint escape command all the time)…?

  • I’m using webstorm and I am able to just ignore it not finding quasar ( and now its not really imported much I suppose ), but I am adding a couple alias to quasar.conf.js and I am looking for what I can point Preferences->Languages & Frameworks->JavaScript->Webpack at so it picks the alias up since I will actually be importing those.

  • Yeah, but ‘quasar’ alias is already preconfigured from node_modules/quasar-cli webpack-conf.js:

    alias: {
    quasar: appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.esm.js`),
    src: appPaths.srcDir,
    components: appPaths.resolve.src(`components`),
    layouts: appPaths.resolve.src(`layouts`),
    pages: appPaths.resolve.src(`pages`),
    assets: appPaths.resolve.src(`assets`),
    plugins: appPaths.resolve.src(`plugins`),
    variables: appPaths.resolve.app(`.quasar/variables.styl`),
    // CLI using these ones:
    'quasar-app-styl': appPaths.resolve.app(`.quasar/app.styl`),
    'quasar-app-variables': appPaths.resolve.src(`css/themes/variables.${cfg.ctx.themeName}.styl`),
    'quasar-styl': appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.styl`)

    and when I used that webpack setting it is not picked up by pycharm, see this issue. This issue is recorded here:

  • Nice, thanks for opening that issue.

    I was looking around a bit for a file, maybe in a hidden directory, that is created when I see quasar dev show: “app:quasar-conf Generating Webpack config +6ms”, but I did not find one.