Integrate vue-styleguidist with quasar

fakx

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?

fakx

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?

theg6

i’m also interested in this

No More Posting New Topics!

Integrate vue-styleguidist with quasar