2

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

Ravi Maniyar
  • 661
  • 2
  • 7
  • 22
  • [Vue SSR Guide - Enabling CSS Extraction](https://ssr.vuejs.org/guide/css.html#enabling-css-extraction) – Michal Levý Dec 19 '21 at 14:39
  • Also, when asking such questions you should always include information (probably the content of `package.json`) about the version of the tools you are using (Vue, Webpack, plugins etc.) – Michal Levý Dec 19 '21 at 14:49
  • Hi @MichalLevý - thanks for responding. But I just wanted to know whether extracting CSS is possible with SSR? I guess its not, I have seen the Vue SSR guide and the extractCSS plugin is deprecated. They are asking to use minicss-extract plugin but that doesn't work with SSR. – Ravi Maniyar Dec 19 '21 at 16:05
  • So the only one question lies here, whether its possible to extract css from SSR at all? Per my research its not, but I would like to know your thoughts as well @MichalLevý - thanks, appreciate your response. – Ravi Maniyar Dec 19 '21 at 16:06
  • What you mean by `extractCSS plugin is deprecated` ? I mean I know that documentation is a weak point at this (quite a long) time of transitioning from Vue 2 to Vue 3 but I really doubt the possibility of extracting CSS would be depreceated. Probably only the `extractCSS` option of `vue-loader` is but I bet there is a way of doing it....just not properly documented right now. I must again point out that it is hard to help if you not share more details about what versions of the tools you are using... – Michal Levý Dec 19 '21 at 16:54
  • https://github.com/webpack-contrib/extract-text-webpack-plugin this is a deprecated plugin now. – Ravi Maniyar Dec 19 '21 at 18:57
  • @MichalLevý I have edited my question with some version information. Thanks. – Ravi Maniyar Dec 19 '21 at 20:40
  • Hey @MichalLevý - just checking if you have revised thoughts based on my edited information and about extract-text-webpack deprecated plugin? Thanks. – Ravi Maniyar Dec 21 '21 at 10:53
  • Yep, as I said - docs are bit chaotic. `extract-text-webpack-plugin` is indeed deprecated. Just use `mini-css-extract-plugin` instead. v2 is for Webpack 5 only but you can use v1.x with webpack 4. [Example](https://vue-loader.vuejs.org/migrating.html#css-extraction) in Vue Loader docs. Even Vue CLI v4 (which is based on Webpack 4) is using it for [CSS extraction](https://cli.vuejs.org/config/#css-extract) – Michal Levý Dec 21 '21 at 11:46
  • When I try to use `mini-css-extract-plugin`, it gives warnings of "document not defined" exception when I try to run the `dist/` version. – Ravi Maniyar Dec 21 '21 at 11:48
  • As I understand it you should not use this plugin in [server build](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/90#issuecomment-380796867). Only in the client build. Client build `index.html` have a `link` to the extracted CSS file so it can be used as a template for `bundleRenderer` – Michal Levý Dec 21 '21 at 12:13
  • Also note that what you are trying to do goes directly against the best practices of web performance - read [critical CSS](https://web.dev/extract-critical-css/) – Michal Levý Dec 21 '21 at 12:18
  • Yeah, so I am trying to generate the css extracted in server side rendering. But seems there is no way. It always either generates inline style code which is used in or just fails with various exceptions. :-( @MichalLevý – Ravi Maniyar Dec 21 '21 at 12:45
  • You **don't need** to extract CSS in server build! As the CSS is already extracted in the client build. So only thing you need is to use the created CSS file and include link to it in the HTML generated during SSR. Vue server/client SSR plugin should do that for you. Check [this repo](https://github.com/Avcajaraville/debugging-mini-css-extract-plugin) ...it is from one of the commenters on GitHub thread I linked before and I believe (just eye inspecting) it contains working SSR setup with `mini-css-extract-plugin` – Michal Levý Dec 21 '21 at 13:48
  • Yeah, if I remove CSS from SSR then I am left with exception `Error: render function or template not defined in component: anonymous` – Ravi Maniyar Dec 21 '21 at 14:41
  • If you look at official Vue SSR documentation [here](https://ssr.vuejs.org/guide/css.html), they tell you to use `extract-text-webpack-plugin` which is deprecated and asks us to use `minicss-extract`, however, that is not compatible with server webpack builds. So this has caused confusion whether SSR can extract CSS and use on separate file or not?! :-) – Ravi Maniyar Dec 21 '21 at 16:39

0 Answers0