Anonymous
Глобальные стили CSS из библиотеки компонентов не загружаются в next.js
Сообщение
Anonymous » 26 июн 2025, 08:35
У меня мало глобальных стилей в моей библиотеке компонентов, которые я пытаюсь использовать в проекте Next.js. Они применяются только, как только я добавляю console.log в следующем фрагменте.
Код: Выделить всё
"use client";
import * as components from 'component-library';
import { FloButton } from 'component-library';
export default function Home() {
console.log(components); // Button
);
}
Какова моя лучшая ставка здесь?
Код: Выделить всё
{
"name": "component-library",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "dist/main.js",
"types": "dist/main.d.ts",
"files": [
"dist"
],
"sideEffects": [
"**/*.css",
"**/*.scss"
],
"exports": {
".": {
"import": "./dist/main.js",
"types": "./dist/main.d.ts"
},
"./icon/*": {
"import": "./dist/components/FloIcon/*.js",
"types": "./dist/components/FloIcon/*.d.ts"
},
"./webcomponents": {
"import": "./dist/webcomponents.js",
"types": "./dist/webcomponents.d.ts"
}
},
"scripts": {
"dev": "vite",
"build": "rm -rf dist && vite build",
"lint": "eslint .",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"peerDependencies": {
"@floating-ui/react": "^0.27.12",
"@r2wc/react-to-web-component": "^2.0.4",
"@types/classnames": "^2.3.4",
"classnames": "^2.5.1",
"react-dom": "^19.1.0",
"react": "^19.1.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@storybook/react-vite": "^9.0.12",
"@types/lodash.kebabcase": "^4.1.9",
"@types/node": "^24.0.3",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"eslint-plugin-storybook": "^9.0.12",
"glob": "^10.4.5",
"lodash.kebabcase": "^4.1.1",
"prettier": "^3.6.0",
"sass-embedded": "^1.89.2",
"storybook": "^9.0.12",
"ts-morph": "^26.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5",
"vite-plugin-css-injected-by-js": "^3.5.2",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-lib-inject-css": "^2.2.2"
}
}
Спасибо!
Подробнее здесь:
https://stackoverflow.com/questions/796 ... in-next-js
1750916133
Anonymous
У меня мало глобальных стилей в моей библиотеке компонентов, которые я пытаюсь использовать в проекте Next.js. Они применяются только, как только я добавляю console.log в следующем фрагменте.[code]"use client"; import * as components from 'component-library'; import { FloButton } from 'component-library'; export default function Home() { console.log(components); // Button ); } [/code] Какова моя лучшая ставка здесь?[code]{ "name": "component-library", "private": true, "version": "0.0.0", "type": "module", "main": "dist/main.js", "types": "dist/main.d.ts", "files": [ "dist" ], "sideEffects": [ "**/*.css", "**/*.scss" ], "exports": { ".": { "import": "./dist/main.js", "types": "./dist/main.d.ts" }, "./icon/*": { "import": "./dist/components/FloIcon/*.js", "types": "./dist/components/FloIcon/*.d.ts" }, "./webcomponents": { "import": "./dist/webcomponents.js", "types": "./dist/webcomponents.d.ts" } }, "scripts": { "dev": "vite", "build": "rm -rf dist && vite build", "lint": "eslint .", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "peerDependencies": { "@floating-ui/react": "^0.27.12", "@r2wc/react-to-web-component": "^2.0.4", "@types/classnames": "^2.3.4", "classnames": "^2.5.1", "react-dom": "^19.1.0", "react": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.25.0", "@storybook/react-vite": "^9.0.12", "@types/lodash.kebabcase": "^4.1.9", "@types/node": "^24.0.3", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", "eslint": "^9.25.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-storybook": "^9.0.12", "glob": "^10.4.5", "lodash.kebabcase": "^4.1.1", "prettier": "^3.6.0", "sass-embedded": "^1.89.2", "storybook": "^9.0.12", "ts-morph": "^26.0.0", "typescript": "~5.8.3", "typescript-eslint": "^8.30.1", "vite": "^6.3.5", "vite-plugin-css-injected-by-js": "^3.5.2", "vite-plugin-dts": "^4.5.4", "vite-plugin-lib-inject-css": "^2.2.2" } } [/code] Спасибо! Подробнее здесь: [url]https://stackoverflow.com/questions/79679695/global-css-styles-from-component-library-not-loading-in-next-js[/url]