javascript - Cómo cargar estilos desde archivos .scss y componentes de React en Storybook v7
Estoy intentando poner en marcha Storybook para mi proyecto, pero no carga los estilos de mis archivos .scss. Cuando uso estilos en línea en mis componentes, todo funciona bien, pero no cuando se importan los estilos.
Las siguientes imágenes muestran la diferente salida en storybook:
Historia con estilos de .scss
Historia con estilo en línea
Al leer varios hilos parece ser una especie de "problema conocido", pero las soluciones que funcionan para los demás no parecen funcionar para mí... Tal vez sea porque no soy desarrollador de front-end originalmente, tal vez sea algo trivial que he pasado por alto y tal vez simplemente no tenga ni idea de lo que estoy haciendo.
Los estilos se importan todos desde un archivo junto al componente: import * as styles from ./STYLESFILE.module.scss. Esto se aplica a todos los componentes reales con toda la profundidad y subcarpetas que ello conlleva.
TestComp.tsx
import React from "react";
import * as styles from "./test.module.scss";
export const TestThing: React.FunctionComponent = () => {
return <div className={styles.thing}>test</div>;
};
export const TestInline: React.FunctionComponent = () => {
return <div style={{ height: "50px", width: "50px", backgroundColor: "red" }}>test</div>;
};
test.module.scss
.thing {
background-color: red;
width: 50px;
height: 50px;
}
He intentado agregar soporte para esto en main.ts como se especifica
import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", '@storybook/preset-scss',
{
name: '@storybook/addon-styling',
options: {
sass: {
// Require your Sass preprocessor here
implementation: require('sass'),
},
},
},
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: "tag",
},
webpackFinal: async (config) => {
config.resolve = config.resolve || {};
config.resolve.alias = { src: path.resolve(__dirname, "../src") };
config.resolve.modules = config.resolve.modules || [];
config.resolve.modules.push(path.resolve(__dirname, "../src"));
return config;
},
};
export default config;
He leído algunas sugerencias sobre añadir cosas en el archivo de vista previa, pero eso no me ha ayudado. Mi preview.tsx se ve así
import React from "react";
import type { Preview } from "@storybook/react";
import "styles/global.module.scss";
import "../src/test.module.scss";
const preview: Preview = {
decorators: [
(Story) => (
<Story />
),
],
};
export default preview;
Partes relevantes de package.json
"devDependencies": {
"@babel/preset-env": "^7.22.5",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
...
"@parcel/resolver-default": "2.8.3",
"@parcel/transformer-sass": "2.8.3",
"@parcel/transformer-svg-react": "2.8.3",
"@parcel/transformer-typescript-tsc": "2.8.3",
"@parcel/validator-typescript": "2.4.0",
"@storybook/addon-essentials": "^7.0.22",
"@storybook/addon-interactions": "^7.0.22",
"@storybook/addon-links": "^7.0.22",
"@storybook/addon-styling": "^1.3.0",
"@storybook/blocks": "^7.0.22",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^7.0.22",
"@storybook/react-webpack5": "^7.0.22",
"@storybook/testing-library": "^0.0.14-next.2",
"@testing-library/jest-dom": "5.12.0",
"@types/autobahn": "20.9.1",
"@types/enzyme": "3.10.7",
"@types/enzyme-adapter-react-16": "1.0.6",
"@types/jest": "27.0.3",
"@types/node": "18.15.11",
"@types/react": "18.0.37",
"@types/react-dom": "16.9.10",
"@types/react-redux": "7.1.25",
"@types/react-router": "5.1.20",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "4.29.3",
"@typescript-eslint/parser": "4.29.3",
"concurrently": "7.0.0",
"css-loader": "^5.2.6",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.4.4",
"eslint": "7.32.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "^0.6.12",
"identity-obj-proxy": "3.0.0",
"jest": "27.3.1",
"jest-each": "27.4.6",
"jest-environment-jsdom": "27.5.1",
"jest-junit": "13.0.0",
"jsdom": "20.0.3",
"parcel": "2.8.3",
"parcel-resolver-tspaths": "0.0.9",
"prettier": "2.8.7",
"process": "0.11.10",
"prop-types": "^15.8.1",
"sass": "^1.63.6",
"sass-loader": "^10.1.1",
"storybook": "^7.0.22",
"style-loader": "^2.0.0",
"ts-jest": "27.1.4",
"typescript": "4.9.3"
},
Todas las dependencias añadidas con ^son nuevas para esta rama donde intento añadir storybook.
En este proyecto estamos usando TypeScript, React, Parcel y Node.
==== cosas que no funcionaron ====
en main.ts, en webpackFinal intenté agregar reglas
primer intento:
config.module.rules.push({
test: /.\.module\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../src/*'),
});
segundo intento:
config.module.rules.push({
test: /.\.module\.scss$/,
include: path.resolve(__dirname, '../src'),
use: [
{
loader: "style-loader",
options: {
modules: {
namedExport: true,
},
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
namedExport: true,
},
},
}, 'sass-loader'
],
});
ambos dieron los mismos errores, y todos parecen ser "ModuleNotFoundError". La salida es aprox 2500 líneas con 73 errores, y el último de ellos es este:
ModuleNotFoundError: Module not found: Error: Can't resolve './process-update' in '/...MY_PATH.../node_modules/webpack-hot-middleware'
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/Compilation.js:2022:28)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:817:13)
at eval (eval at create (/...MY_PATH.../node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:10:1)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:275:22)
at eval (eval at create (/...MY_PATH.../node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:9:1)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:448:22)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:118:11)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:689:25)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:893:8)
at <anonymous> (/...MY_PATH.../node_modules/webpack/lib/NormalModuleFactory.js:1013:5)
resolve './process-update' in '/...MY_PATH.../node_modules/webpack-hot-middleware'
using description file: /...MY_PATH.../node_modules/webpack-hot-middleware/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /...MY_PATH.../node_modules/webpack-hot-middleware/package.json (relative path: ./process-update)
no extension
Field 'browser' doesn't contain a valid alias configuration
/...MY_PATH.../node_modules/webpack-hot-middleware/process-update doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/...MY_PATH.../node_modules/webpack-hot-middleware/process-update.module.scss doesn't exist
as directory
/...MY_PATH.../node_modules/webpack-hot-middleware/process-update doesn't exist
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.