storybookjs/vue-cli-plugin-storybook

Unable to run Storybook with Stylus files (v0.4.7 of the CLI plugin)

jasonadt opened this issue · 13 comments

jasonadt commented

Prior to this latest version (0.4.7) I had no troubles, everything loaded fine when running npm run storybook but after updating to this latest version: I get the following errors related to my use of .styl files with stylus-loader:

ERROR in ./node_modules/vuetify/src/stylus/components/_grid.styl 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import '../bootstrap'
| 
| .container
 @ ./node_modules/vuetify/es5/components/VGrid/VFlex.js 7:0-52
 @ ./node_modules/vuetify/es5/components/VGrid/index.js
 @ ./src/lib/vuetify.js
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./config/storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

The above is error is just one of many similar errors. I assume that this is due to a change in the whitelisting of Webpack plugins by Vue-CLI-Plugin-Storybook.

pksunkara commented

@jasonadt Yes, you are probably correct. Could you provide me with an example repo to work with?

jasonadt commented
pksunkara commented

You don't need to share a full repo. Just an sample repo (small reproducible one created freshly). You can paste your modifications to vue config here, but there's no guarantee that I can reproduce the error. Which is why I was asking for an example.

gabemule commented

Hey guys!!!
I'm having the same issue importing scss files.

  • 👍3
mapsandapps commented

I am having the same issue. Storybook was working fine until I added "a la carte" Vuetify components. Now I'm getting the same error as above.

mapsandapps commented

Adding

  defaultConfig.module.rules.push({
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
  });

to my Storybook webpack config fixed the error for me.

  • 👍4
  • 😕2
backbone87 commented

should work with vue cli 3 and plugin version 0.5.0

nidkil commented

Where is the storybook webpack.json file located that the above stylus-loader needs to be added to?

nidkil commented

Figured out I need to add webpack.config.js to the ./config/storybook directory with the following contents:

const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.styl$/,
    loader: ["style-loader", "css-loader", "stylus-loader"],
    include: path.resolve(__dirname, "../../src")
  });
  return defaultConfig;
};

Now the project does compile succesfully, but the styles are still not work. I'm using the a la carte setup of Vuetify. Any suggestions?

nidkil commented

For anyone interested or comes here with the same problem I figured out how to setup Storybook with Vuetify using Vue CLI 3 without the need to use the stylus loader directly. Checkout this repo for more information.

backbone87 commented

@nidkil great work! from your experience setting this up, do you have any recommendations what should be improved in the plugin to ease the usage within such a setup?

crusenov commented

@nidkil @jasonadt I have similar problems with vue-loader and stylus loader. I'm using vue-cli-plugin-storybook v0.6.1 and also vue-loader v15.7.0. I can't do static build. Any idea?

greenled commented

@nidkil thanks a lot for the sample project. Is there any chance you could provide an update for Vuetify 2.x?

  • 👍2