Quasar creates two CSS files upon the build:
I want them to have the names like:
-quasar.css
-appQuasar.css
I have been searching a lot and I can't find any documentation to change the CSS. For example the app file on quasar.config.js
Thank you,
Related
I'm making a website using Vue, and have added localization using vue-i18n, however there are some svg-images that also need to change with localization.
Is it possible to add the filename to the localization file like this:
"image" : "EnglishImage.svg"
or
"image" : "../assets/images/price/EnglishImage.svg"
And in the Vue something like: <img :src="$t('image')">
And have it change when the localization is changed?
As a quick temporary fix I used the following steps:
Place the images normally into the page
Run project
Use inspect to find the path for them. (it was something like "../img/EnglishImage.c9bc8f65.svg"
Add these paths to the Localization files
Not the best solution, but for now it works
I'm currently wanting to create Vue components with SVG elements as part of the template with the Vue components being created within .vue files. I am trying to work out how to get both IntelliSense for Vue from vetur as well as getting suggestions for SVG.
I have tried setting the file associations in the VsCode settings.json file, but it doesn't look like you can associate a file type to more than one language mode at a time.
Is it possible to use two different plugins for IntelliType on one file type or does that functionality not exist yet?
I would like to know how I can add an old Three Js code to a page component in Vue Js, like just plain javascript grabed on html script tag, without using methods or computed objects from Vue
I'm using node 10.14, Vue-cli 3 and Vue scaffold
If I understand your question correctly, one way you could probably do this is to have the JavaScript extracted out into a helper file like /lib/3JS.js and then make sure to export it.
Then you could import it into your Vue file and use it there.
I'm new to Vue (and the concept of single file components) and not sure how the CSS is compiled when my app is generated.
I have a pattern library where all the SCSS is compiled for my project so I want to pull this into my components. I know I can load in the mixins and variables globally, then I intend on handpicking other blocks of sass if they need to be used to style that component.
What I'm worried about is:
if I keep using the same style definitions in multiple components, will these be duplicated in the compiled css?
If so. how can that be avoided? Eg:
I import the 'headings.scss' in 10 components. Will there be 10 instances of that 'headings.scss' file in the compiled CSS?
I hope that makes sense! Just need some more clarity here.
Yup there will be duplication. But if you are using vuejs webpack template the production build's css is processed by cssnano which will discard duplicated css
note; only exact duplicates will be discarded.
How do I get Less to work with an aurelia cli project?
I've added a style.less file under src and I can see it's bundled into app-bundle.js. But I am not sure if or how I need to add reference to it in app.html?
I've added a div tag
<div class="test-less">Test less</div>
in app.html using a class in my style.less file but when I run the app the css is not used - even though I can see the css in the app-bundle.js:
define('text!style.css', ['module'], function(module) { module.exports = ".test-less {\n color: #FF0000;\n background-color: green;\n}\n"; });
I'm not sure what the 'define..' actually does - ie does it inject the css into the DOM? It is listed beneath the define statement which includes the app.html - so maybe it's out of scope - so not usable in app.html???? If so, how should one use Less with Aurelia (project created by aurelia CLI)
Thanks
Tim
As #Rabah-g stated - I needed to add a require eg:
<require from="style.css"></require>
To figure out what path to use - I just used what was stated in the 'define' statement in app-bundle.js. In this case simply 'style.css'.