Почему vite сборщик при сборке не подключает css файл, хотя создает его в папке?

Question

[Дмитрий Путилов]

Всем привет, возникла проблема, делаю сборку проекта
npm run build

Она собирается, Все хорошо, но почему то стили не подкл файле js, в чем может быть проблема. Я проверял, если вручую вбить
import "./style.css"
то все работает нормально, но почему то сам build не подкл его там

Мой 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"<code lang="javascript">

</code>
        }
      }
    }
  }
});

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" }]
}

Вот файлы сборки, тут есть style.css, но он не подключается

Как моно решить эту проблему? Буду очень благодарен

Comments

[WbICHA]

Я проверял, если вручую вбить
import "./style.css"
то все работает нормально, но почему то сам build не подкл его там

Действительно, почему сборщик отсеивает то, что не подключено? По какой такой неведомой причине он должен собирать то, незнаю что?

[Дмитрий Путилов]

WbICHA, Так в этом и вопрос был, как сделать так ,что бы он подключал. Реализовал через плагин vite

[WbICHA]

Дмитрий Путилов, легко. Добавь import "./style.css".

Answer 1

[Алексей Ярков]

А куда по вашему надо его подключить в папке dist? В js файл? Чтобы что произошло?
Файл стилей подключается к html странице вообще-то.

Comments

[Дмитрий Путилов]

Я библиотеку собираю, посмотри по конфигу vite. При сборке библиотеки нет html файл. Он должен подключится в js файле, с помощью import

[Dosya]

Дмитрий Путилов, vite так не работает

[Дмитрий Путилов]

Dosya, Получилось,vite-plugin-css-injected-by-js
И тогда он при сборке css файл не создает, а встраивает его в js файл сразу

[Алексей Ярков]

Дмитрий Путилов,

а встраивает его в js файл сразу

Повторю вопрос: Чтобы что произошло?
Ну чем отдельно лежащий файл не устроил?
Вот я хочу использовать твою библиотеку. Я напишу так:

import 'your-lib';
import 'your-lib/dist/style.css';

Всё, нет проблем )) И пусть уже мой сборщик отдувается как это собрать правильно.
Вдруг я захочу сначала свои стили подключить, а потом стили либы.

[Aetae]

Дмитрий Путилов, да, как уже сказано выше - стили либы и должны лежать отдельно, чтобы пользователь мог подключать их так, как ему удобно.
Особенно это касается scss и прочих препроцессоров - если вы их используете, то пользователю желательно предлагать на подключение сразу оба варианта: и собранный css и исходный scss.

[Дмитрий Путилов]

Aetae, Алексей Ярков, Да, теперь понял суть, спасибо