vue cli global body style not included in build - vue.js

I added this css rule
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
...
</style>
to my App.vue file within the tag (not scoped ;-); as learned in vue mastery courses. Which BTW are a great help!
This approach also is proposed by Babacadabra in a related post.
Everything builds fine, and the locally defined (scoped) styles of a component can be found in the dist/css folder.
But my global style declaration for the background-color disappeared. As result the website layout is different than the one I tested locally (using 'vue serve'):
The background color is not applied.
What am I making wrong?
I helped myself by adding the background-color declaration directly to my index file, but that should be a patch only. I'm looking for a final solution, so the complete workflow works as expected and local and remote versions behave the same.
UPDATE (more code):
As requested here more details, i.e. the complete App.vue. I hope that is sufficient, since to my (very basic ;.-) understanding of vue the global style declarations go into this Module.
<template>
<div id="app">
<img class="vservuLogo" alt="VservuLogo" src="./assets/VservU-Logo.png">
<HelloWorld msg="Welcome to VservU GmbH Munich"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<style>
body {
background-color: rgb(184, 182, 182);
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vservuLogo {
width: 50%;
}
</style>
UPDATE2:
Since I could not reproduce that behavior in a new project, I guess I simply missed to clear the cache!

Related

Vuejs - vue2-editor not accepting all tags

I have implemented the vue2-editor, and here is the below code
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<p>Some initial content</p>"
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
margin-top: 60px;
}
</style>
If the content is wrapped with <p> tag then the editor shows the content correctly, if it is wrapped with <div> tag then it throws an exception,
Exception: Uncaught TypeError: Cannot read properties of undefined (reading 'emit')
Few more tags with same issue (<title>,<small>,<span>)
sandbox link for reference: https://codesandbox.io/s/liz23?file=/src/App.vue:0-553
Thanks
Check this codesanbox I made: https://codesandbox.io/s/stack-72533246-vue2editor-div-bug-z8qqp8?file=/src/App.vue
It looks that is a bug of the library, meanwhile it gets fixed you can use this workaound.
import { VueEditor, Quill } from "vue2-editor";
const Block = Quill.import("blots/block");
Block.tagName = "DIV";
Quill.register(Block, true);
Refer to this github issue thread for more info: https://github.com/davidroyer/vue2-editor/issues/63

using variable in scss doesn't work for vue

I am working on the vue component, which has applied scss for styling.
<style scoped lang="scss">
:root {
--c-text-primary: #282a32;
--c-background-secondary: #fdfcff;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: var(--c-background-secondary);
color: var(--c-text-primary);
}
</style>
however it doesn't work out, any idea how to make it work?
Do you have sass dependencies installed?
I have the dependencies:
sass
sass-loader
and it works fine for me

Why do SCSS variables imported from another file doesn't work in Vue 3?

I have installed sass loader in my vue 3 project, but the issue is that I want to import variables from another file, but doesn't work
my schema is:
src
assets
scss
styles.scss
_variables.scss
styles.scss
#import url('./_variables.scss');
body{
font-family: 'Montserrat';
background-color: $primary-black;
}
.sidebar{
width: 250px;
height: 100vh;
max-height: 100vh;
background-color: $primary-black;
}
_variables.scss
$primary-black: #222222;
App.vue
Some HTML
<script>
import Sidebar from './components/Sidebar';
export default {
components: { Sidebar },
setup() {
},
}
</script>
<style lang="scss" scope>
#import url('./assets/scss/styles.scss');
</style>
And the issue is that in the browser the $primary-black variable fails, it appears background-color: $primary-black literally, I mean doesn't take de "#222222" color instead, but if I change the variable, and put it inside the styles.scss file, it works, so I'm not sure what could be the problem
Do not use the url function while importing, try the below
<style lang="scss" scope>
#import './assets/scss/styles.scss'
</style>

Super small Vue button

I'm learning Vue, and even with the simplest examples there is something wrong. For example, buttons. I have a defined component, myButton, responds to clicks, but it doesn't look like it should, is super small and dont have any label. What am I doing wrong?
Part of index.js:
Vue.component('mybutton', {
props: {
buttonLabel: String,
},
template: '<button #click="onClick()" class="btn">{{ buttonLabel }}</button>',
methods: {
onClick(){
console.log('Click');
}
},
})
Part of index.html:
<div id="app">
<mybutton text="From Vue"></mybutton>
<button class="btn">Test</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
And CSS:
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px,20px;
border-radius: 5px;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
Your prop is called buttonLabel, while you pass a property called text inside your index.html. Therefore, the button doesn't get any text and then it's rendered without any inner content (and therefore slim, since you didn't give it fixed width and height).
You need to change the part of index.html and replace text with button-label (Vue automatically maps buttonLabel to it, and it is the better option. Using buttonLabel might not work in this case, since you are not using single file components.
Call it like
<mybutton mylabel="hI"></mybutton>
Vue.component('mybutton', {
props: ['mylabel'],
template: '<button>{{ mylabel }}</button>'
})
https://codepen.io/flakerimi/pen/wvgGqVb
https://v2.vuejs.org/v2/guide/components.html

background property not working in Vue.js

Background properties are somehow not working inside my scss file, all other properties do work.
when i use this for example
scss file:
body {
background: #202020;
font-size: 62.5%;
}
browser never returns background (i tested this with different elements and files):
body {
font-size: 62.5%;
}
I use the standard Vue installation which is suitable with scss/css/sass
I include my scss files inside my main.js file like this
import './assets/scss/main.scss'
I also tried using it inside a scoped tag
<style lang="scss" scoped>
.layout { background: red; height: 100vh; }
</style>
but only the height applied
import inside style tag doesn't work either
<style lang="scss">
#import "../assets/scss/main.scss";
</style>
I know it sounds like a stupid typo or something but i can assure you it's not.