use storybook with vue and css preprocessor

[sky790312]

I face some problem with css preprocessor.
I have import global.styl in my project. How do I use it in storybook ..?

I can't import stylus file directly in here. like:
import '../assets/css/global.styl'

VM8103 preview.bundle.js:38013 Error: Module parse failed: /Users/kevin.hu/Documents/vreditor/src/assets/css/global.styl Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import url('../node_modules/bootstrap/dist/css/bootstrap.min.css')
| @import url('../node_modules/font-awesome/css/font-awesome.min.css')
| @import './variables.styl'
    at Object.<anonymous> (VM8103 preview.bundle.js:40971)
    at __webpack_require__ (VM8103 preview.bundle.js:670)
    at fn (VM8103 preview.bundle.js:88)
    at Object.<anonymous> (VM8103 preview.bundle.js:39535)
    at Object.disposed (VM8103 preview.bundle.js:39584)
    at __webpack_require__ (VM8103 preview.bundle.js:670)
    at fn (VM8103 preview.bundle.js:88)
    at loadStories (VM8103 preview.bundle.js:36872)
    at ConfigApi._renderMain (VM8103 preview.bundle.js:37881)
    at render (VM8103 preview.bundle.js:37907)

[ndelangen]

You should import the file, and then add a loader by customizing the webpack config:
https://storybook.js.org/configurations/custom-webpack-config/#docs-content

[sky790312]

I use it and setting the webpack. Now It can understand stylus file.
But I still face some problems:

ERROR in ./src/assets/css/global.styl
Module not found: Error: Can't resolve './assets/img/buttons/radio.svg' in '/Users/kevin.hu/Documents/vreditor/src/assets/css'
 @ ./src/assets/css/global.styl 6:6643-6684
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

I have used url-loader in webpack.config like project setting but still doen't work.

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

ERROR in ./src/assets/css/global.styl
Module not found: Error: Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css' in '/Users/kevin.hu/Documents/vreditor/src/assets/css'
 @ ./src/assets/css/global.styl 3:10-117
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

I have use the bootstrap in my global setting. It works in my project but here can't work.

Please help me to resolve it... Thanks!

[ndelangen]

The problem seems to be there's no '../node_modules/bootstrap/dist/css/bootstrap.min.css' file relative to the .styl file?

Since it appears to be in node_modules, you could try bootstrap/dist/css/bootstrap.min.css. If this module is installed, that is.

If the CSS file is static you may also add it to the preview-head.
https://storybook.js.org/configurations/add-custom-head-tags/#docs-content

[sky790312]

I think I can fixed the problem about path.. Thanks.
I still have the second problem which is about the image handle (png, svg..etc.)

ERROR in ./src/assets/css/global.styl
Module not found: Error: Can't resolve './assets/img/buttons/radio.svg' in '/Users/kevin.hu/Documents/vreditor/src/assets/css'
 @ ./src/assets/css/global.styl 6:6643-6684
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

I have already set the webpack as following:

  {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
  },

But it still doen't work. Any idea..? Thanks!

[ndelangen]

My idea is the path to the file is wrong 😆

Looks like it should be '../img/buttons/radio.svg' ?

[ndelangen]

I'll close this issue, as I think the remaining problems are not really 'Storybook for Vue'-related. Feel free to re-open if you disagree or find a bug!