Problema
Mientras uso Storybook, estoy ejecutando npm run storybook y obtengo el siguiente error.
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a functionAntecedentes/Contexto
Mi objetivo es lograr que Storybook pueda trabajar con sass .
La configuración es simple: tengo archivos scss que el archivo del componente importa.
Al buscar formas de lograr esto, encontré un complemento para poder hacerlo, vea esto . Básicamente, puede ejecutar npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader .
Al hacerlo, me encontré con mi primer error. Fue el mismo error, pero para sass-loader . Este hilo de Stack Overflow me ayudó a corregir ese error.
Entonces, supongo que en resumen, lo he intentado:
Dependencias de desarrollo relevantes
"@storybook/preset-scss": "^1.0.3", "css-loader": "^6.2.0", "sass-loader": "^10.1.1", "style-loader": "^3.2.1"¡Gracias de antemano!
Solución
Después de dar un paso atrás, me di cuenta de que podía probar lo que hice para solucionar el problema del sass-loader : degradar las versiones principales .
Pasos
style-loader 1 versión principal degradada a 2.0.0 : npm i style-loader@2.0.0css-loadercss-loader 1 degradada a 5.2.7 : npm i css-loader@5.2.7Resumen
Al degradar todos los cargadores a una versión principal, pude hacer que funcionara.
También me encontré con este problema al configurar sass en storybook. El script de hilo que proporciona el archivo Léame instalará las últimas versiones de esas bibliotecas que ya no son compatibles con webpack 4, que es en lo que se ejecuta el libro de cuentos.
Para cualquier otra persona que tenga ese problema con el libro de cuentos, esto es lo que puede ejecutar en su lugar.
yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0Después de bajar de categoría, en mi caso lo resolví simplemente comentando los cargadores scss y sass:
{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, modules: true } } // , // { // loader: 'sass-loader' // } // , // { // loader: 'scss-loader' // } ] }El módulo de declaración "*.module.css"; no afectó el resultado.
RECUERDA: Corre siempre
npm startpara probar estos cambios de configuración para ver si sucede algo**. Hacer esto me salvaría esta tarde.