feat: automatically import styles

Author: Zerone

README.md

@@ -53,8 +53,6 @@ npm i vue-default-page
 
 // Import the directives
 import vueDefaultPage from 'vue-default-page';
-// Import the style
-import 'vue-default-page/index.css';
 
 import { createApp } from 'vue';
 
@@ -103,8 +101,6 @@ app.use(vueDefaultPage, {
 
 // Import the directive
 import { vdpLoading } from 'vue-default-page';
-// Import the style
-import 'vue-default-page/index.css';
 
 import { createApp } from 'vue';
 
@@ -144,8 +140,6 @@ app.use(vdpLoading, {
 <script setup lang="js">
   // Import the directives creation function
   import { createVueDefaultPage } from 'vue-default-page';
-  // Import the style
-  import 'vue-default-page/index.css';
   // Create the directive
   const vLoading = createVueDefaultPage('loading');
 </script>

README.zh-CN.md

@@ -51,8 +51,6 @@ npm i vue-default-page
 
 // 引入指令
 import vueDefaultPage from 'vue-default-page';
-// 引入样式
-import 'vue-default-page/index.css';
 
 import { createApp } from 'vue';
 
@@ -101,8 +99,6 @@ app.use(vueDefaultPage, {
 
 // 引入指令
 import { vdpLoading } from 'vue-default-page';
-// 引入样式
-import 'vue-default-page/index.css';
 
 import { createApp } from 'vue';
 
@@ -142,8 +138,6 @@ app.use(vdpLoading, {
 <script setup lang="js">
   // 引入指令创建方法
   import { createVueDefaultPage } from 'vue-default-page';
-  // 引入样式
-  import 'vue-default-page/index.css';
   // 创建指令
   const vLoading = createVueDefaultPage('loading');
 </script>

config/vite.config.core.ts

@@ -1,9 +1,11 @@
 import { defineConfig, mergeConfig } from 'vite';
 import baseConfig from './vite.config.base';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 export default mergeConfig(
   baseConfig,
   defineConfig({
+    plugins: [libInjectCss()],
     build: {
       rollupOptions: {
         external: ['vue'],

package.json

@@ -26,7 +26,7 @@
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
-  "style": "dist/style.css",
+  "style": "dist/index.css",
   "exports": {
     "./web-components": {
       "import": "./dist/web-components/index.js",
@@ -38,8 +38,11 @@
       "require": "./dist/index.cjs",
       "types": "./dist/types/index.d.ts"
     },
-    "./index.css": "./dist/style.css"
+    "./index.css": "./dist/index.css"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "dev": "vite -c=./config/vite.config.base.ts",
     "build": "run-s build:core build:ce type-check",
@@ -106,6 +109,7 @@
     "stylelint-config-standard-less": "^3.0.1",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
+    "vite-plugin-lib-inject-css": "^2.1.1",
     "vitest": "^1.6.0",
     "vue": "^3.3.0",
     "vue-tsc": "^1.8.25"