Vue : fails to start with SCSS preset

[tholander]

Describe the bug
When trying to use SCSS preset on a brand new Vue 2 project, I'm not able to start Storybook. It fails with the message

Cannot find module 'vue-loader/lib/plugin'

To Reproduce
Steps to reproduce the behavior:

1. Create a simple new Vue project with vue create <project-name>
2. Select the default preset
3. Initialize Storybook with npx sb init
4. Install SCSS preset yarn add -D @storybook/preset-scss css-loader sass sass-loader style-loader
5. Run yarn storybook or npm run storybook
6. You should see error logs about framework-preset-vue not finding vue-loader/lib/plugins

Expected behavior
Storybook runs without errors/warnings

Screenshots
If applicable, add screenshots to help explain your problem.

System
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 88.0.4324.190
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-actions: ^6.1.18 => 6.1.18
@storybook/addon-essentials: ^6.1.18 => 6.1.18
@storybook/addon-links: ^6.1.18 => 6.1.18
@storybook/preset-scss: ^1.0.3 => 1.0.3
@storybook/vue: ^6.1.18 => 6.1.18

[phated]

It doesn't seem like you installed the vue-loader peerDependency that @storybook/vue requires. This isn't installed for you automatically because some versions of vue-cli don't use webpack.

We may be able to add that dependency into your devDeps automatically on sb init with some of the features we built into the CLI to support Vue 3

[tholander]

Indeed it resolved this problem, but now whenever I try to use SCSS in a SFC, I get this

I just add a style tag in the default Button component added by sb init with lang attribute set to scss

[tholander]

The version of vue-loader I installed is 15.9.6

[tholander]

OK I found what's wrong. It seems to be more a compatibility issue between sass-loader v11 and vue v2. Starting from v11, sass-loader requires webpack v5 and vue-cli works with webpack v4

[phated]

Glad you figured it out! If you want to send a PR to the preset-scss README mentioning the version differences, I'll get that reviewed. Cheers!

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.3 containing PR #14018 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease