Режим библиотеки Vite с импортом CSSCSS

Разбираемся в CSS
Ответить
Anonymous
 Режим библиотеки Vite с импортом CSS

Сообщение Anonymous »

Я перестроил свою небольшую библиотеку кроссвордов React для использования Vite. Кажется, в разработке он работает нормально, но когда я публикую пакет и импортирую его в другой проект, я получаю следующую ошибку:
[vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "mycrossword"
|- TypeError: Unknown file extension ".css" for Documents\code\mc-remix\node_modules\mycrossword\dist\main.css
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
at defaultLoad (node:internal/modules/esm/load:143:22)
at ModuleLoader.load (node:internal/modules/esm/loader:409:7)
at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)

Каждый компонент в библиотеке имеет свой собственный импорт побочных эффектов CSS, например. import './Crossword.css'.
Вывод сборки генерирует main.js и main.css, но он не может найти/использовать файл CSS. Это может быть что-то из-за того, что ESM не понимает импорт CSS? Я попробовал несколько вариантов конфигурации, но ничего не помогло. Любая помощь будет очень принята с благодарностью.
GitHub: https://github.com/t-blackwell/mycrossword
Пакет NPM: https://www.npmjs.com/package/mycrossword
vite.config.ts:
import { defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
libInjectCss(),
dts({ include: ['lib'] }),
tsconfigPaths(),
],
build: {
copyPublicDir: false,
lib: {
entry: resolve(__dirname, 'lib/main.ts'),
formats: ['es'],
fileName: 'main',
},
rollupOptions: {
external: ['react', 'react/jsx-runtime', 'react-dom'],
output: {
// Force CSS code-splitting off
manualChunks: undefined,
// Ensure CSS is properly processed when code-split
inlineDynamicImports: true,
},
},
},
});

package.json:
{
"name": "mycrossword",
"author": "Tom Blackwell",
"private": false,
"license": "MIT",
"version": "2.0.1",
"description": "React crossword component",
"keywords": [
"react",
"crossword",
"crosswords"
],
"type": "module",
"main": "dist/main.js",
"module": "dist/main.js",
"types": "dist/main.d.ts",
"exports": {
".": {
"import": "./dist/main.js",
"types": "./dist/main.d.ts"
},
"./dist/*.css": "./dist/*.css"
},
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "https://github.com/t-blackwell/mycrossword"
},
"sideEffects": true,
"scripts": {
"dev": "vite --open",
"build": "tsc --p ./tsconfig-build.json && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"test": "jest --config jest.config.ts"
},
"peerDependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@types/node": "^20.11.30",
"@types/react": "^18.2.71",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-css-import-order": "^1.1.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"glob": "^10.3.10",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"prettier": "^3.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"ts-jest": "^29.2.5",
"typescript": "^5.4.3",
"vite": "^4.5.3",
"vite-plugin-dts": "^3.7.3",
"vite-plugin-lib-inject-css": "^2.0.1",
"vite-tsconfig-paths": "^5.1.4"
},
"dependencies": {
"classnames": "^2.5.1",
"isomorphic-dompurify": "^2.21.0",
"zustand": "^5.0.3"
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... ss-imports
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»