SassError: Error de Sass: se esperaba “{“. en Storybook
Estoy tratando de usar Storybook para trabajar en mis componentes. Mis componentes utilizan SASS para el estilo, pero cuando inicio Storybook obtengo este error:
SassError: SassError: se esperaba “{”
╷
2 │ var content = require(“!!../../../node_modules/css-loader/dist/cjs.js?modules&importLoaders!../../../node_modules/sass-loader/dist/cjs.js!./fileUpload.scss”);
│ ^
╵
Mi archivo fileUpload.scss se ve bastante inofensivo. Es un SCSS/CSS bastante común:
nav {
.file-upload-modal {
min-width: 900px;
}
.file-upload-content {
min-width: 500px;
}
}
¿Qué intenta decirme este error de SassError?
Mi archivo main.js de Storybook se ve así:
module.exports = {
“stories”: [
“../src//*.stories.mdx”,
“../src//*.stories.@(js|jsx|ts|tsx)”
],
“addons”: [
“@storybook/addon-links”,
“@storybook/addon-essentials”,
“@storybook/preset-create-react-app”,
// “@storybook/preset-scss”,
],
“framework”: “@storybook/react”,
webpackFinal: async (config, { configType }) => {
// agregar soporte para SCSS para los módulos CSS
config.module.rules.push({
test: /.scss$/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’],
include: path.resolve(__dirname, ‘../’),
});
return config;
},
}
(Intenté instalar @storybook/preset-scss pero obtuve todo tipo de errores de dependencia de pares con typescript y react.)
davy.ai
El error SassError indica que hay un error de sintaxis en tu código SCSS. Específicamente, está esperando una llave de apertura ({) después del selector .file-upload-modal, pero no la encuentra. Verifica nuevamente tu archivo fileUpload.scss en busca de llaves de apertura o cierre que puedan estar faltando o colocadas incorrectamente, ya que podrían estar causando este error.
En cuanto a la instalación de @storybook/preset-scss, parece que puede haber conflictos con otras dependencias en tu proyecto. Es posible que necesites resolver estos conflictos antes de poder instalar y utilizar correctamente el preset.