SCSS preset is not working with latest node-sass #195

riccardogiorato · 2021-03-23T07:37:43Z

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]

The text was updated successfully, but these errors were encountered:

spacebromx · 2021-03-24T12:55:19Z

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 · 2021-04-06T20:12:20Z

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 · 2021-05-06T09:01:53Z

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 · 2021-05-06T16:59:56Z

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

noahtallen · 2021-05-13T05:31:47Z

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 · 2021-06-24T15:55:53Z

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 · 2021-06-28T01:45:29Z

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 · 2021-06-28T08:35:00Z

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

1nfinity-5starZ · 2021-06-29T08:25:49Z

@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 · 2021-07-03T03:25:29Z

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

lawnchamp · 2021-07-27T18:25:44Z

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 · 2021-07-29T18:13:38Z

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 · 2021-08-05T08:43:03Z

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

Please refer to: storybookjs/presets#195

MrJadaml · 2021-08-15T15:38:33Z

PR created to update preset-scss README

#209

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

shennan · 2021-08-18T10:30:08Z

I also needed to downgrade css-loader to 5.2.6

noahtallen · 2021-08-23T20:57:14Z

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

MRezaSafari · 2021-09-02T08:51:38Z

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 · 2021-10-23T03:36:30Z

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 · 2021-12-30T19:37:54Z

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 · 2022-02-23T21:12:18Z

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 · 2022-03-25T12:31:43Z

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 · 2022-07-06T02:58:54Z

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 · 2022-11-05T20:50:32Z

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 · 2023-02-24T11:18:17Z

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"```

shilman transferred this issue from storybookjs/storybook Mar 23, 2021

Roddoark mentioned this issue Apr 3, 2021

Storybook Roddoark/chillwatch#4

Merged

noahtallen mentioned this issue May 13, 2021

Update style packages to latest versions Automattic/wp-calypso#52801

Merged

3 tasks

DrakeLambert mentioned this issue Jul 19, 2021

How to add Scss Support? DennisKo/component-library-template#3

Closed

solring added a commit to solring/mock-dashboard that referenced this issue Aug 5, 2021

resolve scss import issue.

e2c6561

Please refer to: storybookjs/presets#195

MrJadaml mentioned this issue Aug 15, 2021

update install instructions #209

Merged

WangShuXian6 mentioned this issue Feb 4, 2022

Storybook WangShuXian6/blog#133

Open

sergejschorcht mentioned this issue Jan 18, 2023

Error: Cannot find module 'sass-loader' storybookjs/storybook#18958

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SCSS preset is not working with latest node-sass #195

SCSS preset is not working with latest node-sass #195

riccardogiorato commented Mar 23, 2021

spacebromx commented Mar 24, 2021

massivelines commented Apr 6, 2021 •

edited

Loading

mbaranovski commented May 6, 2021

6be709c0 commented May 6, 2021

noahtallen commented May 13, 2021

EliuTimana commented Jun 24, 2021

PudparK commented Jun 28, 2021 •

edited

Loading

moonou commented Jun 28, 2021

1nfinity-5starZ commented Jun 29, 2021

PudparK commented Jul 3, 2021 •

edited

Loading

lawnchamp commented Jul 27, 2021

MartinDawson commented Jul 29, 2021 •

edited

Loading

vrg-success commented Aug 5, 2021

MrJadaml commented Aug 15, 2021

shennan commented Aug 18, 2021

noahtallen commented Aug 23, 2021

MRezaSafari commented Sep 2, 2021

maheshsamudra commented Oct 23, 2021

Megajjks commented Dec 30, 2021

thewanionly commented Feb 23, 2022 •

edited

Loading

movahedan commented Mar 25, 2022

bmitchinson commented Jul 6, 2022 •

edited

Loading

aselcuk commented Nov 5, 2022

samuelfbtlh commented Feb 24, 2023 •

edited

Loading

SCSS preset is not working with latest node-sass #195

SCSS preset is not working with latest node-sass #195

Comments

riccardogiorato commented Mar 23, 2021

spacebromx commented Mar 24, 2021

massivelines commented Apr 6, 2021 • edited Loading

mbaranovski commented May 6, 2021

6be709c0 commented May 6, 2021

noahtallen commented May 13, 2021

EliuTimana commented Jun 24, 2021

PudparK commented Jun 28, 2021 • edited Loading

moonou commented Jun 28, 2021

1nfinity-5starZ commented Jun 29, 2021

PudparK commented Jul 3, 2021 • edited Loading

lawnchamp commented Jul 27, 2021

MartinDawson commented Jul 29, 2021 • edited Loading

vrg-success commented Aug 5, 2021

MrJadaml commented Aug 15, 2021

shennan commented Aug 18, 2021

noahtallen commented Aug 23, 2021

MRezaSafari commented Sep 2, 2021

maheshsamudra commented Oct 23, 2021

Megajjks commented Dec 30, 2021

thewanionly commented Feb 23, 2022 • edited Loading

movahedan commented Mar 25, 2022

bmitchinson commented Jul 6, 2022 • edited Loading

aselcuk commented Nov 5, 2022

samuelfbtlh commented Feb 24, 2023 • edited Loading

massivelines commented Apr 6, 2021 •

edited

Loading

PudparK commented Jun 28, 2021 •

edited

Loading

PudparK commented Jul 3, 2021 •

edited

Loading

MartinDawson commented Jul 29, 2021 •

edited

Loading

thewanionly commented Feb 23, 2022 •

edited

Loading

bmitchinson commented Jul 6, 2022 •

edited

Loading

samuelfbtlh commented Feb 24, 2023 •

edited

Loading