Storybook: Support for SCSS

[PawelGIX]

Version

@nuxtjs/storybook: latest
nuxt: latest

Plain installation + @storybook/preset-scss
https://storybook.nuxtjs.org/options#addons

Error

```
ERROR in ./pages/index.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./pages/index.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&lang=css&) 4:14-367 14:3-18:5 15:22-375
  @ ./pages/index.vue?vue&type=style&index=0&lang=css&
  @ ./pages/index.vue
  @ ./.nuxt-storybook/router.js
  @ ./.nuxt-storybook/index.js
  @ ./.nuxt-storybook/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./layouts/default.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./layouts/default.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=style&index=0&lang=css&)
  4:14-369 14:3-18:5 15:22-377
  @ ./layouts/default.vue?vue&type=style&index=0&lang=css&
  @ ./layouts/default.vue
  @ ./.nuxt-storybook/App.js
  @ ./.nuxt-storybook/index.js
  @ ./.nuxt-storybook/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-389 14:3-18:5 15:22-397
  @ ./.nuxt-storybook/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
  @ ./.nuxt-storybook/components/nuxt-loading.vue
  @ ./.nuxt-storybook/App.js
  @ ./.nuxt-storybook/index.js
  @ ./.nuxt-storybook/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./components/VuesaxLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VuesaxLogo.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./components/VuesaxLogo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VuesaxLogo.vue?vue&type=style&index=0&lang=css&) 4:14-372 14:3-18:5 15:22-380
  @ ./components/VuesaxLogo.vue?vue&type=style&index=0&lang=css&
  @ ./components/VuesaxLogo.vue
  @ ./.nuxt-storybook/components/index.js
  @ ./.nuxt-storybook/storybook/preview.js
  @ ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./components/Logo.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./components/Logo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css&)
  4:14-366 14:3-18:5 15:22-374
  @ ./components/Logo.vue?vue&type=style&index=0&lang=css&
  @ ./components/Logo.vue
  @ ./.nuxt-storybook/components/index.js
  @ ./.nuxt-storybook/storybook/preview.js
  @ ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&) 4:14-387 14:3-18:5 15:22-395
  @ ./.nuxt-storybook/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
  @ ./.nuxt-storybook/components/nuxt-error.vue
  @ ./.nuxt-storybook/index.js
  @ ./.nuxt-storybook/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./node_modules/vuesax/dist/vuesax.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vuesax/dist/vuesax.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'onlyLocals'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (E:\Ampps\www\storybooknode_modules\css-loadernode_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (E:\Ampps\www\storybooknode_modules\css-loader\dist\index.js:36:29)
  @ ./node_modules/vuesax/dist/vuesax.css 4:14-138 14:3-18:5 15:22-146
  @ ./.nuxt-storybook/App.js
  @ ./.nuxt-storybook/index.js
  @ ./.nuxt-storybook/client.js
  @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./components/Table.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./components/Table.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
4 │ var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./Table.scss");
│
^
╵
components\Table.scss 4:217 root stylesheet
@ ./components/Table.scss 2:12-365 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
@ ./node_modules/vue-docgen-loader/lib??ref--9!./node_modules/babel-loader/lib??ref--0-0!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--10-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Table.vue?vue&type=script&lang=js&
@ ./components/Table.vue?vue&type=script&lang=js&
@ ./components/Table.vue
@ ./.nuxt-storybook/components/index.js
@ ./.nuxt-storybook/storybook/preview.js
@ ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt-storybook/client.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.nuxt-storybook/storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.nuxt-storybook/storybook/preview.js-generated-config-entry.js ./.nuxt-storybook/storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.32 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.12 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.```

What is Expected?

What is actually happening?

[dankellett]

I've found that SCSS is supported in Nuxt-Storybook out of the box if its setup in your Nuxt app without adding any other libraries like this.

[farnabaz]

Sorry for the late response.
You do not need another addon for supporting SCSS. Nuxt supports SCSS and other css-preprocessors out of the box. Just install node-sass and sass-loader in your project and Nuxt will load SCSS styles for you.
Checkout playground

I close this issue, feel free to reopen it :slightly_smiling_face: or ask any question