Integrate vue-styleguidist with quasar



  • Re: Location of generated webpack config

    I want to use vue-styleguidist and reuse the quasar generated webpack config.js
    Has anyone done this yet?



  • I have written a js script to try to load the webpack config into styleguidist. I know these are internal APIs, but maybe this can serve as a start to extend quasar:

    const getConfig = require('vue-styleguidist/scripts/config');
    const binutils = require('vue-styleguidist/scripts/binutils');
    const StyleguidistError = require('react-styleguidist/scripts/utils/error');
    
    QuasarConfig = require('quasar-cli/lib/quasar-config')
    
    async function parseAddress({
      host,
      port
    }) {
      if (this.chosenHost) {
        host = this.chosenHost
      } else {
        if (host && ['localhost', '127.0.0.1', '::1'].includes(host.toLowerCase())) {
          host = '0.0.0.0'
        }
      }
    
      this.running = true
      return {
        host,
        port
      }
    }
    
    async function init(config) {
      const quasarConfig = new QuasarConfig({
        dev: true,
        port: 8000,
        host: 'localhost',
        dev: true,
        onAddress: parseAddress
      })
      await quasarConfig.prepare()
      quasarConfig.compile()
      config.webpackConfig = quasarConfig.getWebpackConfig()
      binutils.commandServer(config, true);
    }
    
    let config;
    try {
      config = getConfig({}, binutils.updateConfig);
    } catch (err) {
      if (err instanceof StyleguidistError) {
        const link = consts.DOCS_CONFIG + (err.anchor ? `#${err.anchor.toLowerCase()}` : '');
        binutils.printErrorWithLink(
          err.message,
          `${err.extra}\n\nLearn how to configure your style guide:`,
          link
        );
        process.exit(1);
      } else {
        throw err;
      }
    }
    
    init(config);
    

    With this styleguidist starts, but I get stylus resolve error in .quasar/variables.styl

    Error: ...\.quasar\variables.styl:20:9
       16| // ........
       17| // </style>
       18|
       19| // First we load app's Stylus variables
       20| @import '~quasar-app-variables'
    ---------------^
       21|
       22| // Then we load Quasar Stylus variables.
       23| // Any variables defined in "app.variables.styl"
    
    failed to locate @import file ~quasar-app-variables.styl
     @ ./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus& (./node_modules/vue-style-loader??ref--7-oneOf-2-0!./node_modules/css-loader??ref--7-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-2-2!./node_modules/stylus-loader??ref--7-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus&) 4:14-403 14:3-18:5 15:22-411
     @ ./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus&
     @ ./src/components/Mood.vue
     @ ./node_modules/vue-styleguidist/loaders/styleguide-loader.js!./node_modules/vue-styleguidist/lib/index.js
     @ ./node_modules/vue-styleguidist/lib/index.js
     @ multi ./node_modules/vue-styleguidist/lib/index ./node_modules/react-dev-utils/webpackHotDevClient.js
    

    Any idea what is missing? Where is ‘quasar-app-variables’ defined?



  • i’m also interested in this


Log in to reply