SCSS preset is not working with latest node-sass

[riccardogiorato]

Describe the bug

• I followed this guide to configure SCSS in my storybook project: https://github.com/storybookjs/presets/tree/master/packages/preset-scss#basic-usage
• when executing the project I would get this error coming from the "sass-loader" package

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader

• I found out this issue almost identical on "nuxt"
• the solution proposed was to install a supported version of "[email protected]" not the 11 version.

Possible Fix would be identical to this npm uninstall -D sass-loader && npm install -D [email protected]

[spacebromx]

I tried using [email protected] but unfortunately it didn't work. I'm using these packages too:

• @storybook/react: ^6.1.21
• @storybook/preset-scss: ^1.0.3

[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

[mbaranovski]

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

[6be709c0]

@mbaranovski can you share your package.json & main,js, having the same issue, doesn't solve the import scss

[noahtallen]

I'm guessing this is blocked until webpack 5 is supported in storybook core? There are some improvements in sass-loader v11 we'd like to use :)

[EliuTimana]

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 👍🏾

[PudparK]

Can anyone take a look at my main.js and package.json to see if they can spot my issue ?🙏🏼 I tried downgrading sass-loader to 10.1.1 to no avail. For context, I'm using nextjs and trying to use styles.module.scss files. Here is the repository.

package.json

  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@size-limit/preset-small-lib": "^5.0.1",
    "@storybook/addon-essentials": "^6.3.0",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.3.0",
    "@storybook/addons": "^6.3.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.0",
    "@types/node": "^15.12.5",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.8",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "husky": "^6.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "sass": "^1.35.1",
    "sass-loader": "10.1.1",
    "size-limit": "^5.0.1",
    "style-loader": "^3.0.0",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.0",
    "typescript": "^4.3.4"
  },
  "dependencies": {
    "next": "^11.0.1"
  }

main.js

module.exports = {
  stories: ['../_components/**/*.stories.@(ts|tsx|js|jsx)', '../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
  typescript: {
    check: true, // type-check stories during Storybook build
  }
};

[moonou]

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

[1nfinity-5starZ]

@moonou thanks, that fixed it for me. Downgrading sass-loader to v10 alone didn't help. After downgrading style-loader to v2, then the project compiled. Hope this gets more upvotes so people can see how to fix it.

[PudparK]

@moonou I finally got around to trying it out and it did indeed work. Thank you so much!

[lawnchamp]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

[MartinDawson]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

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.

[vrg-success]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

Tnx dude

[MrJadaml]

PR created to update preset-scss README

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

yarn add -D @storybook/preset-scss [email protected] sass [email protected] [email protected]

[shennan]

I also needed to downgrade css-loader to 5.2.6

[noahtallen]

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

[MRezaSafari]

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 [email protected] sass [email protected] [email protected]

[maheshsamudra]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

This worked for me as well! Thanks.

[Megajjks]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

Thanks It's working

[thewanionly]

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.

[movahedan]

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 [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

This one worked for me. After hours of debugging! Thank you.

[bmitchinson]

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',
    },
};

[aselcuk]

i solved this problem in webpack version 5,

• configure with webpack 5 npx sb init --builder webpack5
• then remove the packages you installed for SCSS preset (@storybook/preset-scss, sass-loader, style-loader, css-loader etc.)
• then install the package storybook-addon-sass-postcss yarn add -D storybook-addon-sass-postcss
• add postcss.config.js file to root and add this code block

// postcss.config.js

module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};

• change main.js file config

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: 'storybook-addon-sass-postcss',
      options: {
        rule: {
          test: /\.(scss|sass)$/i,
        },
      },
    }
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

i hope it was helpful...

[samuelfbtlh]

Just my contribution:

I have mixed @thewanionly and @MartinDawson approaches

main.js

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

package.json

    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "css-loader": "5.2.6",
    "sass-loader": "10",
    "style-loader": "2.0.0",
    "webpack": "^5.75.0"```