Use the common webpack configuration

[raimund-schluessler]

This migrates nextcloud/vue to the common nextcloud/webpack-vue-configuration. This simplifies the configuration drastically and also includes the legendary migration from node-sass to sass 😉

As a side note, the style guide only works properly when compiled in development mode, but it was like this before already.

Because we now use sass we see some Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. warnings, which will be fixed in a follow-up PR.

[raimund-schluessler]

@skjnldsv There might be an issue with npm run styleguide again. The webpack-dev-server version required by @nextcloud/webpack-vue-config and vue-styleguidist seem to collide and I couldn't figure out how to solve it yet.

[raimund-schluessler]

@skjnldsv There might be an issue with npm run styleguide again. The webpack-dev-server version required by @nextcloud/webpack-vue-config and vue-styleguidist seem to collide and I couldn't figure out how to solve it yet.

Since this PR might be blocked for a while by this, I split the node-sass -> sass migration into a a separate PR: #2631.

[ASDFGamer]

I looked into this Issue for myself a bit, because I wanted to have vue 3 and if I see it correctly then vue-styleguidist uses a old Version of webpack-dev-server (3.11.3 instead of 4.7.2). And that Version can't be updated until react-styleguidist updates their version from 3.x to 4.x. They are working on that update with a lot of other changes for webpack 5 (styleguidist/react-styleguidist#1996).
This realy looks like it could take a while until the version is fixed.

[susnux]

vue-styleguidist uses a old Version of webpack-dev-server (3.11.3 instead of 4.7.2). And that Version can't be updated until react-styleguidist updates their version from 3.x to 4.x.

This is done with version 12.0.0, but now vue-styleguidist needs to upgrade to webpack 5. Which seems like a bunch of work, so this might be blocked again for some time.

[skjnldsv]

I think at this point we should move to vite and use the docgen-vite
https://vue-styleguidist.github.io/docgen-vite/
https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/docgen-vite/

[susnux]

I spend a quite some time porting it to webpack 5, but there is a bunch of dependencies pulling in old versions of webpack-dev-server, so that way looks a lot more promising :)

[raimund-schluessler]

Fine with me. I close this issue then. In case vue-styleguidist moves to webpack5 before we move to vite, we can still revisit this PR.