@RishitKedia Can you go into any more details about how to go about getting started making a chrome extension that uses quasar?
Or do you think you could possibly make a starter kit by removing all of the functionality from tabtation and just give us the basic setup for quasar?
I’d really like to use quasar in my chrome extension but I am having a really hard time getting started.
I agree with your desire to end his Tyranny, though part of me secretly thinks I should just give into it.
Anyway, if you want to learn more about what the rules are (or can be set to), I found Airbnb’s Javascript guide to be very helpful. Each rule shows which eslint setting are related to it. https://github.com/airbnb/javascript
@Shone Thanks for the diagram, that’s a very interesting process. I’m currently just using production with no staging aside from local dev on my machine.
[SOLVED]
I was able to resolve this by placing the following code in my quasar.conf.js file, inside extendWebpack:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
ignoreOrder: true
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
}
};
Here is my full build config that I use with netlify for clarification:
build: {
scopeHoisting: true,
vueRouterMode: 'history',
// showProgress: false,
// gzip: true,
// analyze: true,
// preloadChunks: false,
// extractCSS: false,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
// copy _redirects file for netlify
extendWebpack(cfg) {
const CopyWebpackPlugin = require('copy-webpack-plugin')
cfg.plugins.push(
new CopyWebpackPlugin([{
from: 'src/_redirects',
to: ''
}])
)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
ignoreOrder: true
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
}
};
}
},
I’m having the same problem.
I have 2 repositories and I’m trying to move all the code from one to the other… in the first one it works fine. In the new one that has all the same exact files, it won’t build successfully.
WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/findSKU.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
- couldn't fulfill desired order of chunk group(s) ,
WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/lineItem.vue?vue&type=style&index=0&lang=css&
- couldn't fulfill desired order of chunk group(s) ,
- while fulfilling desired order of chunk group(s) ,
Oh cool, I didn’t realize you can inspect like that. I usually just have the console open then click the select element icon.
Dense looks like it should work for me too. Thanks for your help.
When using QSelect, how can I set the height of the entire control? If I set the height of the label, then it appears to be the correct size, but maintains additional space below it down to where the bottom border is. If I add borderless then visually it looks right, but the space is still preserved and leaves the options offset.
I can’t seem to inspect the options element or snip a screen shot of it since it closes after it loses focus. Here’s the codepen though. I made the background blue so that it is easier to see the gap between the options and the dropdown.
@RishitKedia Can you go into any more details about how to go about getting started making a chrome extension that uses quasar?
Or do you think you could possibly make a starter kit by removing all of the functionality from tabtation and just give us the basic setup for quasar?
I’d really like to use quasar in my chrome extension but I am having a really hard time getting started.
I was able to hack this to work locally by changing the actualValue computed property in QDatetime.js to just return the value, since I know I am setting it correctly.
//return formatDate(this.value, this.computedFormat, /* for reactiveness */ this.$q.i18n.date)
return this.value
However, now I don’t know how to keep that change in my netlify deployments. 
I think it has something to do with using dashes vs slashes, but according to the documentation it should work if I provide a format.
It also only happens on months that have a leading 0…
http://blog.dygraphs.com/2012/03/javascript-and-dates-what-mess.html
For some reason, when I set the model programmatically (vs manually picking the date), the datetime input component displays the selected date as 1 day earlier, bur it has a value of the correctly selected date when I inspect it in vue dev tools. How can I get this to display the correct date (e.g. the assigned value of the model)?
<q-datetime v-model=“from” type=“date” format=“YYYY-MM-DD” minimal/>
