Задать вопрос

Что делать, если при сборке библиотеки через 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" }]
}


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

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

Похожие вопросы