Can't inline critical css (FOUC) about quasar-app-extension-ssg HOT 3 CLOSED

Thanks for having created a reproduction repository :)

Which content is concerned exactly ? Is it the red square ?

The only thing I can see is a FOUT (Flash of Unstyled Text).

from quasar-app-extension-ssg.

You were right, the style of index.vue file is not inlined which causes a FOUC.

It seems that adding the vue-svg-inline-loader loader to the webpack rules with the method extendWebpack breaks something.

The style is correctly inlined if you use chainWebpack instead of extendWebpack in your quasar.conf.js file.

Please try replacing the method extendWebpack by this one:

chainWebpack: config => {
  config.module
    .rule("vue")
    .use("vue-svg-inline-loader")
    .loader("vue-svg-inline-loader")
    .options({ addTitle: true, });
}

Let me know if there is any FOUC after this change.

=======================================================

Edit: the issue is not the method itself. Pushing a new vue rule to the end of the rules array breaks the previous existing vue rule.

If you want to continue using the extendWebpack method you can write it like this:

extendWebpack(config) {
  const vueRuleIdx = config.module.rules.findIndex(({ test }) => test.toString() === /\.vue$/.toString());
  
  config.module.rules[vueRuleIdx].use.push({
    loader: 'vue-svg-inline-loader',
    options: {
      addTitle: true,
    },
  })
},

from quasar-app-extension-ssg.

Thank you!

from quasar-app-extension-ssg.