I have a vue app that works ok in development and builds ok using "vite": "3.2.4",. I upgraded the dependencies to "vite": "4.0.3", and it still works in development, but there are some missing styles in production. This is in a component that I haven't touched. Here is a little bit of that component:
<template>
<div :class="`inline-svg ${state}`" :style="divStyle" v-html="icon"></div>
</template>
<style lang="scss">
.inline-svg.h22 svg {
height: 22px;
width: 22px;
}
</style>
Notice that the styles are NOT scoped. Most of the CSS in my app is there. Most of the CSS is scoped. There might be other css that are missing but this is the first obvious one.
The disturbing thing is that it looks different in development than when built. I mostly am looking at the development version so there is a class of bugs I'll never notice.
Related
I am trying to render a Leaflet map using Vue2Leaflet in a jsfiddle so I can get help with a specific problem but I can't even get it to render properly in the trivial case. I have already looked up how to load libraries via CDN in jsfiddle and a far as I can tell, I am doing it right. There are also no errors in the console. But the map will not render.
This is the jsfiddle: https://jsfiddle.net/iboates/bywzgf1q/3/
Vue2Leaflet also requires the vue-client-only library. I have it working in my local codebase but maybe it has something to do with why it isn't working in jsfiddle. I am also loading this library via a CDN.
I've also looked at other jsfiddles using Vue with custom libraries loaded via CDN and I don't see what is being done differently.
Apparently StackOverflow requires that a jsfiddle link requires code in the post as well, which is a bit weird to me since the code is literally contained in a link which can also execute it, but here it goes:
HTML:
<div id="app">
<client-only>
<l-map id="map" ref="map">
<l-tile-layer
:attribution="'x'"
:url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
/>
<!-- <l-geo-json
:geojson="geojsonData"
/> -->
</l-map>
</client-only>
</div>
JS:
import { LMap, LTileLayer } from "./vue2-leaflet";
new Vue({
el: "#app",
components: {
LMap,
LTileLayer,
ClientOnly
},
data: {
geojsonData: {
type: "FeatureCollection",
features: []
}
},
mounted() {
}
})
CSS
#app {
background-color: black;
height: 500px;
width: 500px;
}
#map {
height: 500px;
width: 500px;
}
There are multiple errors in your fiddle.
First of all, Vue is not installed. In addition, you try to import Vue-Leaflet like in a Webpack / Rollup build system and not the way you can use it from a CDN.
To begin with, install your CDN (Vue, Leaflet CSS, Leaflet js, Vue-Leaflet):
https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js
https://unpkg.com/leaflet#1.7.1/dist/leaflet.css
https://unpkg.com/leaflet#1.7.1/dist/leaflet.js
https://unpkg.com/vue2-leaflet#2.6.0/dist/vue2-leaflet.min.js
Then, add your components the CDN-way (check official documentation: https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn
):
components: {
'l-map': window.Vue2Leaflet.LMap,
'l-tile-layer': window.Vue2Leaflet.LTileLayer
}
Check working fiddle: https://jsfiddle.net/scpta4jq/1/
I'm using Katex together with Vuetify. There is a problem with certain classes like accent or overline used by both Katex and Vuetify. This leads to weird stylings like the one you can see below. The overline characters got my accent styling.
I used a vue-katex component like this:
<katex-element expression="\hat A \overline{B} \widetilde{\phi}" />
This is how the equation looks like:
These are the vuetify styles:
This doesn't work:
.v-application .accent {
all: unset !important;
}
How can I disable all Vuetify styles for katex-elements?
There's an open issue on the KaTeX github about this: https://github.com/KaTeX/KaTeX/issues/1456
You can either disable the Vuetify theme:
https://vuetifyjs.com/en/features/theme/#disable-theme
new Vuetify({
theme: { disable: true },
})
Or use web components to isolate the KaTeX CSS, such as katex-elements instead of vue-katex.
Just had the same problem and putting this into one of my Vue components that uses Katex fixed it for me:
<style lang="scss">
span {
.mord.accent {
background-color: inherit !important;
border-color: inherit !important;
}
}
</style>
I am trying to create a custom VueJS components using TailwindCSS and NuxtJS. At times, I want to use the tailwind css #apply directive to style my component. Something like this:
<template>
<div class="card">
...
</div>
</template>
<style>
.card {
#apply bg-grey-200 text-grey-800;
}
</style>
I then want the capability of overriding those styles when I use the component. Something like this:
<Card class="bg-blue-200">...</Card>
Now, this is technically possible -- it just requires organizing the tailing base css file in the right way. Namely, like this:
#tailwind base;
#tailwind components;
.card {
#apply bg-grey-200 text-grey-800;
}
#tailwind utilities;
That is to say, #tailwind utilities needs to come after the custom class names. The problem is that with nuxt it seems to be the opposite -- namely, the custom class names (and their css styles) come after the tailwind utilities.
How can I change this in NuxtJS?
For what it is worth, I am using the #nuxtjs/tailwindcss module with default installation:
buildModules: [
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'#nuxtjs/tailwindcss',
],
I have a Vue.js component and I would like to access my sass variables from my scss file. On the NUXT documentation https://nuxtjs.org/faq/pre-processors/ it says that you can use node sass and sass-loader to do this. So I installed both of those and they are under dev dependencies in my package.json.
After that I added the following to my nuxt.config.js
css: [
'#/assets/sass/main.scss'
],
But when I try to do this in one of my components
<style lang="scss">
html, body{
background-color: $background-color;
overflow: hidden;
}
</style>
I get the error that $background color is undefined? Why is this happening?
My main.scss located in assets/sass
$text-color:#FFFFFF;
$background-color: #FFFFFF;
$primary-color: #1F2338;
$secondary-color: #F73455;
$navigation-opacity: 0.70;
I understand that with 'scoped' i can isolate css stylings to a component, so What's the difference between scoped and module in vuejs components? When should I use module over scoped?
According to the docs:
CSS Modules as an alternative for simulated scoped CSS
So, it's an alternative - It's also worth noting that scoped on a parent component means child components can't see the CSS but with module you can access this.$parent.$style.red to gain access to the styling.
It does however have the added advantage that you can then access your CSS from within your code:
<style module>
.red {
color: red;
}
</style>
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>