feat: inject necessary styles directly to bundle

* add vite plugin css injected by js

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

package.json

@@ -61,6 +61,7 @@
     "typescript-transform-paths": "^3.3.1",
     "unplugin-auto-import": "^0.4.12",
     "vite": "^2.6.10",
+    "vite-plugin-css-injected-by-js": "^1.0.1",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.21",
     "vue-router": "^4.0.12",

vite.config.ts

@@ -5,6 +5,7 @@ import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
 import replace from '@rollup/plugin-replace'
 import copy from 'rollup-plugin-copy'
+import injectCss from 'vite-plugin-css-injected-by-js'
 import pkg from './package.json'
 
 // https://vitejs.dev/config/
@@ -57,6 +58,7 @@ export default defineConfig({
         },
       ],
     }),
+    injectCss(),
   ],
   optimizeDeps: {
     include: ['vue', '@vueuse/core'],

yarn.lock

@@ -5497,6 +5497,11 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+vite-plugin-css-injected-by-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-1.0.1.tgz#3cdef205a413ed39df2a8f4ff8160739ed656014"
+  integrity sha512-Z6tMEIeTesv/B23+1BDhoqRH1WXduat+P1aKMOpDMO/NLWlLF7c1TTJvXJebpH6HXSkrvySbfr5NnooeiSZsMQ==
+
 vite-svg-loader@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz#b5d6ca948b03e45320cb4f96c44bf88f5bef0a2c"