F
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?
