vue-cli 3 + storybook and postcss

[geoffreyrichey]

Getting error message when trying to run storybook with a Vue component that uses postcss

Steps to reproduce the behavior:

1. Create vue project using vue-cli 3 (3.0.5)
2. Initialize storybook (@storybook/vue 4.0.0-alpha.25)
3. Create component with <style lang="postcss">...</style>
4. Add component to storybook and start

Error reads:
Module parse failed: Unexpected token
You may need the appropriate loader to handle this file type

[igor-dv]

Do you have an error log?

[geoffreyrichey]

info @storybook/vue v4.0.0-rc.6
info
info => Loading presets
info => Loading custom addons config.
info => Using default webpack setup.
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
webpack built 7c7c8c0fd8d95dfe7900 in 2772ms
✖ ｢wdm｣: Hash: 7c7c8c0fd8d95dfe7900
Version: webpack 4.23.1
Time: 2772ms
Built at: 2018-10-30 10:15:00
                       Asset       Size   Chunks                    Chunk Names
                 iframe.html    2.1 KiB           [emitted]
                  index.html  697 bytes           [emitted]
     static/iframe.bundle.js   1.34 MiB   iframe  [emitted]  [big]  iframe
 static/iframe.bundle.js.map   1.33 MiB   iframe  [emitted]         iframe
    static/manager.bundle.js   2.91 MiB  manager  [emitted]  [big]  manager
static/manager.bundle.js.map   3.05 MiB  manager  [emitted]         manager
Entrypoint iframe [big] = static/iframe.bundle.js static/iframe.bundle.js.map
Entrypoint manager [big] = static/manager.bundle.js static/manager.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true 64 bytes {iframe} [built]
[1] multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {manager} [built]
[./.storybook/addons.js] 214 bytes {manager} [built]
[./.storybook/config.js] 343 bytes {iframe} [built]
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 145 bytes {iframe} {manager} [built]
[./node_modules/@storybook/addon-actions/register.js] 38 bytes {manager} [built]
[./node_modules/@storybook/addon-links/register.js] 38 bytes {manager} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 366 bytes {manager} [built]
[./node_modules/@storybook/core/dist/client/manager/provider.js] 3.15 KiB {manager} [built]
[./node_modules/@storybook/core/dist/server/config/globals.js] 93 bytes {iframe} [built]
[./node_modules/@storybook/core/dist/server/config/polyfills.js] 113 bytes {iframe} {manager} [built]
[./node_modules/@storybook/ui/dist/index.js] 2.19 KiB {manager} [built]
[./node_modules/@storybook/vue/dist/client/index.js] 909 bytes {iframe} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {iframe} {manager} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] (webpack)-hot-middleware/client.js?reload=true 7.59 KiB {iframe} [built]
    + 899 hidden modules

ERROR in ./src/assets/styles/app.postcss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import 'themes/default.postcss';
| @import 'tailwind.postcss';
|
 @ ./stories/index.stories.js 2:0-42
 @ ./stories sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./src/components/form/Button.vue?vue&type=style&index=0&id=496d829d&lang=postcss&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/form/Button.vue?vue&type=style&index=0&id=496d829d&lang=postcss&scoped=true&) 27:7
Module parse failed: Unexpected token (27:7)
You may need an appropriate loader to handle this file type.
|
|
> button {
|     cursor: pointer;
|     @apply border-2 border-orange text-orange rounded-full px-6 py-4 uppercase text-med
 @ ./src/components/form/Button.vue?vue&type=style&index=0&id=496d829d&lang=postcss&scoped=true& 1:0-160 1:176-179 1:181-338 1:181-338
 @ ./src/components/form/Button.vue
 @ ./stories/index.stories.js
 @ ./stories sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  558 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] 1.62 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.

[igor-dv]

@pksunkara will sb-vue-pluging solve this issue? or custom config is needed anyway?

[pksunkara]

vue plugin should solve this issue.

[geoffreyrichey]

Here's my current SB modules...am I missing something?

"@storybook/addon-actions": "^4.0.0-alpha.25",
"@storybook/addon-centered": "^4.0.0-alpha.25",
"@storybook/addon-console": "^1.0.4",
"@storybook/addon-knobs": "^4.0.0-alpha.25",
"@storybook/addon-links": "^4.0.0-alpha.25",
"@storybook/addon-options": "^4.0.0-alpha.25",
"@storybook/addons": "^4.0.0-alpha.25",
"@storybook/vue": "^4.0.0-alpha.25",

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[backbone87]

this isnt a problem with storybook itself, but its rather complicated setup for users who do not use vue-cli 3 and vue-cli-plugin-storybook.

These 2 utilities properly bootstrap your app with storybook support and make sure the webpack configuration is setup correctly to handle Vue SFCs

[igor-dv]

I think we can close this then.