Стили библиотеки в Vite

Стили библиотеки выходят своим файлом через cssFileName.

Если модуль импортирует css, сборщик не прячет правила внутрь js: для библиотеки их выносят в отдельный файл, чтобы потребитель сам решил, когда подключить оформление. Зададим цвет текста в своём файле:

.lib-hello {
  color: #2c3e50;
}

Импорт css и экспорт функции с hello соберём в src/index.js:

import './style.css';

export function sayHello() {
  return 'hello';
}

Имя css-файла задаёт поле cssFileName в build.lib:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      formats: ['es', 'cjs'],
      fileName: 'hello-lib',
      cssFileName: 'hello-lib',
    },
  },
})

Соберём проект:

npm run build

В dist рядом с hello-lib.js и hello-lib.cjs лежит hello-lib.css с правилами из src/style.css. Откроем css и убедимся, что селектор .lib-hello сохранился.

Импортируйте src/style.css из src/index.js, экспортируйте функцию со строкой ready и соберите стили отдельным файлом ready-ui.css, а скрипт - под тем же именем ready-ui.

Проверьте, что в dist появился ready-ui.css с правилами из src/style.css и что js-файлы не содержат текст правил целиком.