Create bundle CSS in production mode

Hello there!

Does anyone have an idea about how to create a bundle CSS in VSF with production mode?

Hello there!

Is there anyone has an idea about this?

How to remove inline CSS from page? If i remove renderstyle() function from index.template.html then on load, page breaks first time then displays proper.

Hi there, our current webpack config is createdd to output the styles in index.html; you can probably call renderStyles() - save the result to some external JS file (in /dist) and include this file to avoid this style breaking out. Not sure if this is something you’re trying to achieve?

Hello @pkarw

Ya i am just tryting to avoid the style from view:source, but how can we add to external JS file? we must have to create .CSS file (in /dist).

Also how can we include this CSS to our page? As we can’t import build CSS from any file.

Check this webpack plugin: https://vue-loader.vuejs.org/guide/extract-css.html#webpack-4
https://github.com/webpack-contrib/extract-text-webpack-plugin

Okay, Thanks! Will try this.

Hello @pkarw

We have installed mini-css-extract-plugin plugin and added code in core/build/webpack.base.config.ts but when I run the command yarn build and yarn start it’s giving me the below error. Would you please help me with this?

0|server | 2019-08-29 17:39:38: Error during render : /error
2|server | 2019-08-29 17:34:37: ReferenceError: document is not defined
2|server | at server-bundle.js:1:437
2|server | at new Promise ()
2|server | at Function.o.e (webpack/bootstrap:52:0)
2|server | at component (src/themes/appjetty/router/index.js:38:10)
2|server | at /var/www/html/VueStorefront/node_modules/vue-router/dist/vue-router.common.js:1792:17
2|server | at /var/www/html/VueStorefront/node_modules/vue-router/dist/vue-router.common.js:1819:66
2|server | at Array.map ()
2|server | at /var/www/html/VueStorefront/node_modules/vue-router/dist/vue-router.common.js:1819:38
2|server | at Array.map ()
2|server | at flatMapComponents (/var/www/html/VueStorefront/node_modules/vue-router/dist/vue-router.common.js:1818:26)

@Dhruvi take a look at this https://github.com/DivanteLtd/vue-storefront/compare/develop...gibkigonzo:feature/extract-css?expand=1