Storybook: SCSS not being compiled 5.3.3

[JonnyPS]

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(R) Core(TM) 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.

[shilman]

Yes, AFAIK the two presets are NOT compatible. Does the SCSS work in your CRA app without storybook? If so, I would also expect it to work in Storybook. cc @mrmckeb

[JonnyPS]

@shilman - I have followed these steps and run the program as a CRA project without Storybook and it compiles the scss correctly:

1. remove any storybook associated dev dependencies from package.json
2. delete yarn.lock & node_modules
3. run yarn install
4. change scripts obj to standard CRA scripts
5. change App.css to App.scss & change any imports to the scss file extension
6. run yarn start
7. app runs as expected, updating scss file compiles and reloads browser to show updates as expected

[shilman]

Ok, I think it might be a bug in the Storybook CRA preset. @mrmckeb any ideas?

[JonnyPS]

I have created a repro is that helps at all: https://github.com/JonnyPS/repro-repo

[mrmckeb]

I'm looking into this and I think I have a fix here: https://github.com/storybookjs/presets/pull/90

But it needs more testing.

[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

[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