更新 package.json 文件：将版本号从 1.0.4 升级到 1.0.5，新增 exports 配置以支持模块导出。更新 src/index.ts 文件，确保样式依赖正确加载并添加组件类型声明。修改 vite.config.ts 文件，禁用 CSS 代码分割并直接指定 CSS 文件名。

---------------------------
修改样式导入方式

Author: iwangbowen

package.json

@@ -1,11 +1,22 @@
 {
   "name": "vue-expression-editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A powerful Vue 3 mathematical expression editor component",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/types/index.d.ts",
   "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  },
   "files": [
     "dist",
     "README.md",

src/index.ts

@@ -1,17 +1,25 @@
 import { App } from 'vue'
 import ExpressionEditor from './components/ExpressionEditor.vue'
-// 引入基础样式
+
+// 确保样式依赖被正确加载，注意引入顺序
+import './components/styles/variables.scss'
 import './components/styles/base.scss'
 import './components/styles/buttons.scss'
 import './components/styles/input.scss'
 import './components/styles/layout.scss'
 import './components/styles/theme.scss'
 
+// 添加组件类型声明
+declare module 'vue' {
+  export interface GlobalComponents {
+    ExpressionEditor: typeof ExpressionEditor
+  }
+}
+
 const install = (app: App) => {
   app.component('ExpressionEditor', ExpressionEditor)
 }
 
-// 直接导出组件
 ExpressionEditor.install = install
 
 export { ExpressionEditor }

vite.config.ts

@@ -12,11 +12,12 @@ export default defineConfig(({ mode }) => {
       vue(),
       !isDemo && dts({
         include: ['src/**/*.ts', 'src/**/*.vue'],
+        copyDtsFiles: true,
       })
     ].filter(Boolean),
     build: {
       outDir: isDemo ? 'demo-dist' : 'dist',
-      cssCodeSplit: true,
+      cssCodeSplit: false, // 禁用 CSS 代码分割，将所有 CSS 打包到一个文件
       ...(isDemo ? {
         // 演示页面构建配置
         rollupOptions: {
@@ -38,10 +39,7 @@ export default defineConfig(({ mode }) => {
               vue: 'Vue',
               'element-plus': 'ElementPlus'
             },
-            assetFileNames: (assetInfo) => {
-              if (assetInfo.name === 'style.css') return 'index.css';
-              return assetInfo.name;
-            }
+            assetFileNames: 'index.css' // 直接指定 CSS 文件名
           }
         }
       })