SCSS not being compiled 5.3.3

Describe the bug I include scss files in preview.js file but it throws an error when running storybook yarn. The error states: ModuleParseError: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I am using "@storybook/preset-scss": "^1.0.2", & "@storybook/preset-create-react-app": "^1.5.1", - which during the project load a warning message states they may not be compatible with each other.

To Reproduce

1. create a preview.js file and import scss - import '../src/all.scss'
2. create a main.js file and add the presets and addons:

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-scss',
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addons',
    '@storybook/addon-a11y',
    '@storybook/addon-docs/register', // still need to add /register with sb updgrade 5.3.3
    // '@storybook/addon-knobs',
    '@storybook/addon-knobs/register', // still need to add /register with sb updgrade 5.3.3
    '@storybook/addon-viewport',
    '@whitespace/storybook-addon-html/register',
  ],
};

1. run yarn storybook

Expected behavior SCSS to compile and run in browser as CSS.

System: System: OS: macOS Sierra 10.12.6 CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz Binaries: Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm Browsers: Chrome: 79.0.3945.117 Firefox: 60.7.2 Safari: 12.1.1 npmPackages: @storybook/addon-a11y: ^5.3.3 => 5.3.3 @storybook/addon-actions: ^5.3.3 => 5.3.3 @storybook/addon-docs: ^5.3.3 => 5.3.3 @storybook/addon-info: ^5.3.3 => 5.3.3 @storybook/addon-knobs: ^5.3.3 => 5.3.3 @storybook/addon-links: ^5.3.3 => 5.3.3 @storybook/addon-viewport: ^5.3.3 => 5.3.3 @storybook/addons: ^5.3.3 => 5.3.3 @storybook/preset-create-react-app: ^1.5.1 => 1.5.1 @storybook/preset-scss: ^1.0.2 => 1.0.2 @storybook/react: ^5.3.3 => 5.3.3

Additional context Add any other context about the problem here.

[JonnyPS]

@mrmckeb @shilman Thank you for your efforts. i have got everything running on 5.3.4 and it all seems to be working - addons, compiling scss, all stories showing… thanks

[mrmckeb]

@JonnyPS I thought I had created a fix for this (I did clean the preset up in the process), but it turns out that this was caused by an import of preview.js into manager.js.

I also cleaned up the addons list:

  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "@storybook/addon-knobs",
    "@storybook/addon-viewport",
    "@whitespace/storybook-addon-html/register"
  ]

And finally I found an issue where all.scss was importing a file that doesn’t exist (from components).

And everything now works as expected.

Let me know how you go with the above 😃

CC @shilman