Классы NativeWind удаляются с помощью сборника рассказов ⇐ Javascript

[Anonymous]

Я использую Nativewind для библиотеки пользовательского интерфейса, над которой я работаю. Я использую сборник рассказов для Native Web с Vite в качестве бундлера. Проблема в том, что мои стили не применяются. Не переменные с ветром или по умолчанию. Тем не менее, та же конфигурация отлично работает с Expo даже в Интернете.

Код: Выделить всё

/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: [
"./.storybook/**/*.{js,jsx,ts,tsx}",
"../registry/**/*.{js,jsx,ts,tsx}",
"./.stories/**/*.{js,jsx,ts,tsx}",
],
// eslint-disable-next-line
presets: [require("nativewind/preset")],
theme: {
extend: {
colors: {
border: "var(--border)",
input: "var(--input)",
ring: "var(--ring)",
background: "var(--background)",
foreground: "var(--foreground)",
primary: {
DEFAULT: "var(--primary)",
foreground: "var(--primary-foreground)",
},
secondary: {
DEFAULT: "var(--secondary)",
foreground: "var(--secondary-foreground)",
},
destructive: {
DEFAULT: "var(--destructive)",
foreground: "var(--destructive-foreground)",
},
success: {
DEFAULT: "var(--success)",
foreground: "var(--success-foreground)",
},
warning: {
DEFAULT: "var(--warning)",
foreground: "var(--warning-foreground)",
},
muted: {
DEFAULT: "var(--muted)",
foreground: "var(--muted-foreground)",
},
accent: {
DEFAULT: "var(--accent)",
foreground: "var(--accent-foreground)",
},
popover: {
DEFAULT: "var(--popover)",
foreground: "var(--popover-foreground)",
},
card: {
DEFAULT: "var(--card)",
foreground: "var(--card-foreground)",
},
sidebar: {
DEFAULT: "var(--sidebar-background)",
foreground: "var(--sidebar-foreground)",
primary: "var(--sidebar-primary)",
"primary-foreground": "var(--sidebar-primary-foreground)",
accent: "var(--sidebar-accent)",
"accent-foreground": "var(--sidebar-accent-foreground)",
border: "var(--sidebar-border)",
ring: "var(--sidebar-ring)",
},
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
full: "100%",
},
},
},
plugins: [],
};

my global.css файл:

Код: Выделить всё

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--radius: 0.625rem;
--background: #ffffff;
--foreground: #252525;
--card: #ffffff;
--card-foreground: #252525;
--popover: #ffffff;
--popover-foreground: #252525;
--primary: #343434;
--primary-foreground: #fbfbfb;
--secondary: #f7f7f7;
--secondary-foreground: #343434;
--success: #22c55e;
--warning: #eab308;
--muted: #f7f7f7;
--muted-foreground: #8e8e8e;
--accent: #f7f7f7;
--accent-foreground: #343434;
--destructive: #ef4444;
--border: #ebebeb;
--input: #ebebeb;
--ring: #b5b5b5;
--chart-1: #f97316;
--chart-2: #06b6d4;
--chart-3: #3b82f6;
--chart-4: #84cc16;
--chart-5: #f59e0b;
--sidebar: #fbfbfb;
--sidebar-foreground: #252525;
--sidebar-primary: #343434;
--sidebar-primary-foreground: #fbfbfb;
--sidebar-accent: #f7f7f7;
--sidebar-accent-foreground: #343434;
--sidebar-border: #ebebeb;
--sidebar-ring: #b5b5b5;
}

.dark:root {
--background: #252525;
--foreground: #fbfbfb;
--card: #343434;
--card-foreground: #fbfbfb;
--popover: #444444;
--popover-foreground: #fbfbfb;
--primary: #ebebeb;
--primary-foreground: #343434;
--secondary: #444444;
--secondary-foreground: #fbfbfb;
--muted: #444444;
--muted-foreground: #b5b5b5;
--accent: #5f5f5f;
--accent-foreground:  #fbfbfb;
--destructive: #dc2626;
--success: #16a34a;
--warning: #ca8a04;
--border: rgba(255, 255, 255, 0.1);
--input: rgba(255, 255, 255, 0.15);
--ring: #8e8e8e;
--chart-1: #8b5cf6;
--chart-2: #10b981;
--chart-3: #f59e0b;
--chart-4: #ec4899;
--chart-5: #dc2626;
--sidebar: #343434;
--sidebar-foreground: #fbfbfb;
--sidebar-primary: #8b5cf6;
--sidebar-primary-foreground: #fbfbfb;
--sidebar-accent: #444444;
--sidebar-accent-foreground: #fbfbfb;
--sidebar-border: rgba(255, 255, 255, 0.1);
--sidebar-ring: #707070;
}
}

< /code>
Затем для сборника рассказов у ​​меня есть следующая конфигурация: < /p>

import {join, dirname} from "path";
import type {StorybookConfig} from "@storybook/react-native-web-vite";
import {createRequire} from "module";
import {createBuildStoriesPlugin} from "../plugins/buildStories";

const require = createRequire(import.meta.url);

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
stories: [
"../.stories/**/*.mdx",
"../.stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
addons: ["@storybook/addon-docs"],
framework: {
name: getAbsolutePath("@storybook/react-native-web-vite"),
options: {
modulesToTranspile: [
"react-native",
"react-native-web",
"solito",
"moti",
"react-native-reanimated",
"react-native-css-interop",
"nativewind",
"react-native-gesture-handler",
],
pluginReactOptions: {
jsxImportSource: "nativewind",
babel: {
presets: [
["nativewind/babel", {mode: "transformOnly", postcss: true}],
],
plugins: ["react-native-reanimated/plugin"],
},
},
},
},
async viteFinal(viteConfig) {
viteConfig.plugins = viteConfig.plugins || [];
viteConfig.plugins.push(createBuildStoriesPlugin());

// Configure CSS processing for Tailwind
viteConfig.css = {
...viteConfig.css,
postcss: {
plugins: [
require("tailwindcss")({
config: "./tailwind.config.js",
}),
],
},
};

if (!viteConfig.optimizeDeps) {
viteConfig.optimizeDeps = {};
}
if (!viteConfig.optimizeDeps.esbuildOptions) {
viteConfig.optimizeDeps.esbuildOptions = {};
}
if (!viteConfig.optimizeDeps.esbuildOptions.loader) {
viteConfig.optimizeDeps.esbuildOptions.loader = {};
}
viteConfig.optimizeDeps.esbuildOptions.loader[".js"] = "jsx";
viteConfig.optimizeDeps.esbuildOptions.loader[".mjs"] = "jsx";

return viteConfig;
},
};
export default config;

Наконец-то мой preview.ts :
import type {Preview} from "@storybook/react-native-web-vite";
import "../output.css";
import React from "react";
import {NavigationContainer} from "@react-navigation/native";

const preview: Preview = {
parameters: {
backgrounds: {
options: {
light: {
name: "Light",
value: "#ffffff",
},
dark: {
name: "Dark",
value: "#0a0a0a",
},
},
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
initialGlobals: {
backgrounds: {value: "dark"},
},
decorators: [
(Story) => (





),
],
};

export default preview;

< /code>
Проблема не является тренером, генерируя классы. Поскольку мой выходной файл имеет правильные классы в нем, я провел тест. Кроме того, таблица стиля загружается в голову с правильными стилями, но они не применяются. Таким образом, кажется, что Вавилон отбрасывает мои занятия по ветру. Как мне это предотвратить?


Подробнее здесь: https://stackoverflow.com/questions/797 ... -storybook