Что делать, если при сборке библиотеки через vite не подключаются стили?

Все привет, возникла проблема, сделал вот такую вот
небольшую либу
651641ba847e4711081304.png

Начал собирать проект, собрал все без ошибок, далее я прописал
npm link
Для того что бы добавить библиотеку локально. Добавил, создал новый проект, подключил библиотеку через
npm link custom-editor
Он ее видит все норм, но почему то стили все слетели, не один стиль не работает, хотя вот стили тут есть
dist папка
651642ca1589d194199837.png

А в проекте вот так вот появляется
6516430e0fec8750650556.png


Мой vite.config
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import checker from "vite-plugin-checker";
import svgrPlutin from "vite-plugin-svgr";
import dts from "vite-plugin-dts"
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
    svgrPlutin(),
      dts({
        rollupTypes: true,
      })
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@imagesEditor": path.resolve(
        __dirname,
        "src",
        "modules",
        "Editor",
        "images",
      ),
    },
  },
  build: {
    write: true,
    lib: {
      entry: "./src/index.ts",
      name: "custom-editor ",
      fileName: "custom-editor",
      formats: ['es']
    },
    rollupOptions: {
      external: ['react'],
      output: {
        format: "esm",
        globals: {
          react: "react"
        }
      }
    }
  }
});


package.json
{
  "name": "custom-editor",
  "files": [
    "dist"
  ],
  "main": "./dist/custom-editor.umd.cjs",
  "module": "./dist/custom-editor.js",
  "exports": {
    ".": {
      "import": "./dist/custom-editor.js"
    }
  },
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/node": "^20.4.5",
    "classnames": "^2.3.2",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "immutable": "^4.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/draft-convert": "^2.1.4",
    "@types/draft-js": "^0.11.12",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "sass": "^1.64.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-checker": "^0.6.1",
    "vite-plugin-dts": "^3.6.0",
    "vite-plugin-svgr": "^3.2.0"
  }
}


tsconfig.ts
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["vite-plugin-svgr/client"],
    "baseUrl": ".",
    "paths": {
      "@imagesEditor/*": ["src/modules/Editor/images"]
    },
    "declaration": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}


И вот как можно починить эти стили?
  • Вопрос задан
  • 221 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект