presets: SCSS preset is not working with latest node-sass

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:

yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:

yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

This is the solution. Absolutely terrible add-on if the basic readme.md doesn’t even work.

Here’s my full config seen as this is what infuriated me when people post their ‘solutions’.

main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
};

package.json

  "dependencies": {,
    "sass": "^1.36.0"
  },
"devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/html": "^6.3.6",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/preset-scss": "^1.0.3",
    "css-loader": "5.2.6",
    "sass-loader": "10",
    "style-loader": "2.0.0",
  },

If you have the same packages as above it will finally work.

Complete waste of many hours due to this stupid plugin.

@PudparK I have same problem, you also need fixed style-loader version to 2.0.0, that’s work for me.

Do we know if storybook has a plan to update to webpack 5?

PR created to update preset-scss README

https://github.com/storybookjs/presets/pull/209

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

In case someone initialised storybook to the existing create-react-app project, do the above (downgrade sass-loader to 10.1.1) and remove @storybook/preset-create-react-app from the .storybook/main.js file.

Thanks @riccardogiorato & @massivelines

If you have sass-loader installed try changing the installed version to 10.1.1, that fixed it for me. v11 went out on Feb 5th and now requires webpack 5.

Think this also might fix the issue for 191

In case someone initialised storybook to the existing create-react-app project, do the above (downgrade sass-loader to 10.1.1) and remove @storybook/preset-create-react-app from the .storybook/main.js file.

Thanks @riccardogiorato & @massivelines

This works for me, thanks. It has been almost a year now since this issue is reported and sadly the issue still occurs. I hope this gets fixed soon.

Not sure if this will help someone but I had to do a third downgrade before things worked. Here are my steps:

yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

Tnx dude

The following packages still aren’t working with this SCSS preset. After trying the command from lawnchamp.

I’m attempting to use builder 5 so, maybe that’s what’s causing issues? Repo here

package.json

 "sass": "^1.53.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"svelte-loader": "^3.1.3"

main.js

const path = require('path');

module.exports = {
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        '@storybook/preset-scss',
    ],
    framework: '@storybook/svelte',
    core: {
        builder: 'webpack5',
    },
};

if you get this error

ERROR in ./components/form/input/input.module.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (G:\_TDD\NextApp\node_modules\style-loader\dist\index.js:19:24)
 @ ./components/form/input/index.tsx 1:0-41 8:15-21
 @ ./components/form/input/input.stories.tsx
 @ ./components sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.tsx)$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

you should use this:

PR created to update preset-scss README

#209

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0