Как правильно настроить vite для сборки, что бы я мог импортировать css файл?

Question

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

Всем привет, возникла проблема, учусь делать библиотеки для react.

Мой vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dts from "vite-plugin-dts";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: resolve(__dirname, "src", "index.ts"),
      name: "button-test-lib",
      formats: ["umd", "es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        assetFileNames: "button-testing-lib.css",
        globals: {
          react: "react",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

Мой tsconfig

{
  "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,
    "declaration": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Мой package.json

{
  "name": "button-test-lib",
  "files": [
    "dist"
  ],
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "style": "./dist/button-testing-lib.css",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js"
    }
  },
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.68.0"
  },
  "devDependencies": {
    "@types/node": "^20.8.2",
    "@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-swc": "^3.3.2",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.6.0"
  }
}

Проблема в том, что он генерирует файл button-testing-lib.css, но почему то подключить я его не могу никак, выдает вот такую вот ошибку


Подключал библиотеку через npm link

Компоненты и все остальное подулючается, а вот стили

вот таким вот образом нет

import {FC} from "react";
import {Button, type IProps} from "button-test-lib"
import "button-test-lib/dist/button-testing-lib.css";

const App:FC<IProps> = ({name, lastName}) => {


    return (
        <div>
            <Button variant="variant1">test</Button>
            {name} {lastName}
        </div>
    );
};

export default App;

Answer 1

[Игорь]

Нашел такое решение

в vite.config.js добавляем алиса

resolve: {
    alias: {
      'npm-library-name': path.resolve(
        __dirname,
        'node_modules/npm-library-name/build/'
      )
    }
  },

и в index.js импортируем стили
import 'npm-library-name/style.css'

а вот с webpack нифига не работает, тоже алиас есть, тоже стили подключает, не ругается. Но самих стилей нет