Vue.js server side rendering stop using inline CSS

831 Views Asked by At

Preface:

Style loader reference: https://github.com/webpack-contrib/style-loader#linktag

As per the documentation, style-loader allows the webpack to render tags in order to render the styling information.

Main problem:

Vue-style-loader is a forked version of style-loader (https://github.com/vuejs/vue-style-loader)

I am using vue-style-loader in my server side rendering process. It works well, however it renders all the CSS information inline in tag. I want to use tags therefore it won't render huge amount of inline code when the page is loaded.

I didn't see anything related to this in the forums as well. However I got reference from here: https://github.com/webpack-contrib/style-loader/issues/461#issuecomment-739509879 who claims that style-loader won't work in SSR. So that means, SSR will always render inline css? Is there a way to use separate CSS file chunked from SSR returned code using webpack?

Any help is appreciated. Thanks.

EDIT:

Below are some of the packages used with their versions:

"webpack": "^4.25.1",
"vue-loader": "^15.4.2",
"vue-ssr-webpack-plugin": "^3.0.0",
"sass-loader": "^7.1.0",
"css-loader": "^2.1.1",

I am using Vue storefront application version: 1.12.2

0

There are 0 best solutions below