I have a react ts project created with vite and tailwindcss, I customized theme with scss, the problem is that scss styles do not apply in stories.
the main.ts file:
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
'@storybook/addon-designs',
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
the preview.ts file:
import type { Preview } from "@storybook/react";
import "../src/theme/style.scss"
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
the style.scss file:
@import url("../assets/fonts/index");
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
}
html[data-theme="light"] {
// primary -> 800
--primary-100-color: #fbfcff;
--primary-200-color: #eef3fe;
--primary-300-color: #e4ecfc;
--primary-400-color: #c8d8fa;
--primary-500-color: #91b0f4;
--primary-600-color: #5c8af0;
--primary-700-color: #3b73ed;
--primary-800-color: #2563eb;
--shadow-s: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] {
// primary -> 800
--primary-100-color: #2a2b2e;
--primary-200-color: #292f3b;
--primary-300-color: #283144;
--primary-400-color: #26375f;
--primary-500-color: #224695;
--primary-600-color: #1f54ca;
--primary-700-color: #1c5ce9;
--primary-800-color: #1b62ff;
--shadow-s: 0px 4px 8px -2px rgba(50, 50, 50, 1);
}
.th {
&-text-color {
color: var(--text-color);
}
&-bg-color {
background-color: var(--background-color);
}
&-card-bg-color {
background-color: var(--card-bg-color);
}
&-border-color {
border-color: var(--border-color);
}
&-alert-e-color {
background-color: var(--alert-e-color);
}
&-alert-i-color {
background-color: var(--alert-i-color);
}
&-alert-s-color {
background-color: var(--alert-s-color);
}
&-alert-w-color {
background-color: var(--alert-w-color);
}
&-alert-e-text-color {
color: var(--alert-e-text-color);
}
&-alert-w-text-color {
color: var(--alert-w-text-color);
}
&-alert-s-text-color {
color: var(--alert-s-text-color);
}
&-alert-i-text-color {
color: var(--alert-i-text-color);
}
&-bg-card-to-card {
background-color: var(--bg-card-to-card);
}
&-bade-outline-color {
border: var(--bade-outline-color);
}
&-primary-color {
color: var(--primary-color);
}
&-primary-bg-color {
background-color: var(--primary-color);
}
&-primary-border-color {
border: 1px solid var(--primary-color);
}
&:hover {
background-color: var(--primary-color-hover);
}
}
#root {
margin: 0px !important;
padding: 0px !important;
max-width: none !important;
}
body::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
/* border-radius: 10px; */
}
body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #0c78b4;
}
body > iframe {
/* display: none; */
pointer-events: none;
}
body > iframe {
pointer-events: none;
}
body {
direction: rtl;
text-align: right;
background: var(--background-color);
color: var(--text-color);
// background-image: url("../assets/images/back.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
// @apply bg-[#FAFAFA];
}
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{html,js,jsx,ts,tsx}"],
darkMode: ["class", '[data-mode="dark"]'],
theme: {
fontSize: {
// singleLine: {
h1: [
"26px",
{
lineHeight: "40px",
fontWeight: "700",
},
],
h2: [
"24px",
{
lineHeight: "24px",
fontWeight: "700",
},
],
h3: [
"20px",
{
lineHeight: "24px",
fontWeight: "700",
},
],
h4: [
"18px",
{
lineHeight: "24px",
fontWeight: "700",
},
],
h5: [
"16px",
{
lineHeight: "24px",
fontWeight: "700",
},
],
Label01: [
"16px",
{
lineHeight: "24px",
fontWeight: "600",
},
],
Label02: [
"14px",
{
lineHeight: "20px",
fontWeight: "600",
},
],
Label03: [
"12px",
{
lineHeight: "16px",
fontWeight: "600",
},
],
Label04: [
"10px",
{
lineHeight: "16px",
fontWeight: "600",
},
],
Button01: [
"16px",
{
lineHeight: "24px",
fontWeight: "700",
},
],
Button02: [
"14px",
{
lineHeight: "20px",
fontWeight: "700",
},
],
Button03: [
"12px",
{
lineHeight: "20px",
fontWeight: "700",
},
],
Body01: [
"16px",
{
lineHeight: "24px",
fontWeight: "600",
},
],
Body02: [
"14px",
{
lineHeight: "20px",
fontWeight: "600",
},
],
Caption: [
"12px",
{
lineHeight: "16px",
fontWeight: "600",
},
],
Overline: [
"10px",
{
lineHeight: "16px",
fontWeight: "300",
},
],
// },
multiLine: {
h1: [
"26px",
{
lineHeight: "64px",
fontWeight: "700",
},
],
h2: [
"24px",
{
lineHeight: "64px",
fontWeight: "700",
},
],
h3: [
"20px",
{
lineHeight: "48px",
fontWeight: "700",
},
],
h4: [
"18px",
{
lineHeight: "48px",
fontWeight: "700",
},
],
h5: [
"16px",
{
lineHeight: "48px",
fontWeight: "700",
},
],
Label01: [
"16px",
{
lineHeight: "48px",
fontWeight: "600",
},
],
Label02: [
"14px",
{
lineHeight: "48px",
fontWeight: "600",
},
],
Label03: [
"12px",
{
lineHeight: "40px",
fontWeight: "600",
},
],
Label04: [
"10px",
{
lineHeight: "32px",
fontWeight: "600",
},
],
Button01: [
"16px",
{
lineHeight: "40px",
fontWeight: "700",
},
],
Button02: [
"14px",
{
lineHeight: "36px",
fontWeight: "700",
},
],
Button03: [
"12px",
{
lineHeight: "32px",
fontWeight: "700",
},
],
Body01: [
"16px",
{
lineHeight: "40px",
fontWeight: "600",
},
],
Body02: [
"14px",
{
lineHeight: "32px",
fontWeight: "600",
},
],
Caption: [
"12px",
{
lineHeight: "32px",
fontWeight: "600",
},
],
Overline: [
"10px",
{
lineHeight: "24px",
fontWeight: "300",
},
],
},
},
colors: {
primary: {
100: "var(--primary-100-color)",
200: "var(--primary-200-color)",
300: "var(--primary-300-color)",
400: "var(--primary-400-color)",
500: "var(--primary-500-color)",
600: "var(--primary-600-color)",
700: "var(--primary-700-color)",
800: "var(--primary-800-color)",
},
},
boxShadow: {
s: "var(--shadow-s)",
},
extend: {
spacing: {
"01": "0px",
"02": "2px",
"03": "4px",
"04": "6px",
"05": "8px",
"06": "10px",
"07": "12px",
"08": "14px",
"09": "16px",
10: "24px",
11: "32px",
12: "40px",
13: "48px",
14: "56px",
15: "64px",
16: "72px",
17: "80px",
18: "88px",
19: "96px",
20: "104px",
},
borderRadius: {
xs: "4px",
s: "8px",
m: "12px",
l: "16px",
xl: "800px",
},
},
},
plugins: [],
};
I also have these dev dependencies in package.json
"@storybook/addon-designs": "^7.0.7",
"@storybook/addon-essentials": "7.6.6",
"@storybook/addon-interactions": "7.6.6",
"@storybook/addon-links": "7.6.6",
"@storybook/addon-onboarding": "1.0.10",
"@storybook/blocks": "7.6.6",
"@storybook/react": "7.6.6",
"@storybook/react-vite": "7.6.6",
"@storybook/test": "7.6.6",
"@vitejs/plugin-react": "^4.2.1",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.53.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"eslint-plugin-storybook": "^0.6.15",
"postcss": "^8.4.20",
"sass": "^1.69.5",
"storybook": "7.6.6",
"vite": "^5.0.7"
I've tried all ways written on docs but they still don't work. (story book doc says that with using vite I just need to import scss file in preview.ts, but that is not working) my main problems are with colors, non of custom colors apply in storybook I appreciate any help :)
The issue was that I didn't define data-theme in storybook html file after creating the preview-head.html file, question solved
<link rel="preload" href="../src/assets/fonts/YekanXVF.woff2" />
<html lang="en" data-theme="light">
<link href="../dist/output.css" rel="stylesheet" />
</html>