background property not working in Vue.js - 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.

Related

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>

Customizing Buefy with SASS in vue.js

I'm a beginner at this and I'm struggling with changing style for buefy elements. In particular the buefy tabs.
In my component, I've got this style:
<style lang="scss" scoped>
// Import Bulma's core
#import "~bulma/sass/utilities/_all";
// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
"primary": ($min-primary, $primary-invert)
);
$tabs-toggle-link-border-color: red;
$tabs-toggle-link-border-style: red;
$tabs-toggle-link-hover-background-color: red;
$tabs-toggle-link-hover-border-color: red;
$tabs-toggle-link-active-background-color: red;
$tabs-toggle-link-active-border-color:red;
$tabs-toggle-link-active-color: $link-invert !default;
// Import Bulma and Buefy styles
#import "~bulma";
#import "~buefy/src/scss/buefy";
</style>
And my tab is formatted like this:
<b-tabs type="is-toggle" size="is-medium" expanded>
The link color and the primary color are changed like expected. But the tabs remain in their original color.
There are two things I find strange:
If I move this styling to App.vue and remove the "scoped" - the styling does
not work. However - the primary color and the link color changes to purple (not turquoise like I'd expected and which it does if I just remove the $colors from within the component). I thought all styling added to App.vue would work in all components?
Why does not the tabs change color? Have I got the wrong variables? How do I find the right variables? The variables used here is found in bulma/sass/components/tabs.sass.
Both node-sass and sass-loader are installed.
Hope somebody can make me feel a bit more enlightened.
Edit: it turns out, there is a way how to get it working with scoped styles. For that all you need is to wrap #import statements into /deep/ selector:
<style lang="scss" scoped>
... // everything else remains the same
/deep/ {
// Import Bulma and Buefy styles
#import "~bulma";
#import "~buefy/src/scss/buefy";
}
Original answer
Even though this it's a bit old question, I faced the same problem recently with dropdown component.
Variables in original code are correct, but it does not work due to scoped styles. Since #import is called in scoped context, it will be also scoped and thus CSS will not match HTML.
Assuming that original code in tab component is something like this:
$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
.tabs
#extend %block
+overflow-touch
#extend %unselectable
align-items: stretch
display: flex
font-size: $size-normal
justify-content: space-between
overflow: hidden
overflow-x: auto
white-space: nowrap
a
align-items: center
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
....
After compiling Vue loader will add [data-v-xxxxxxx] so it will look:
.tabs[data-v-xxxxxx] {
// styles go here
}
but html for tabs is not scoped and this is the reason why it does not work.
One way to get it working would be to remove scoped, but wrap all your styles
into some class name to keep all css private for the component. Assuming that template root element has class my-component-wrapper, scss will be following:
<style lang="scss" scoped>
.my-component-wrapper {
// Import Bulma's core
#import "~bulma/sass/utilities/_all";
// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
"primary": ($min-primary, $primary-invert)
);
$tabs-toggle-link-border-color: red;
$tabs-toggle-link-border-style: red;
$tabs-toggle-link-hover-background-color: red;
$tabs-toggle-link-hover-border-color: red;
$tabs-toggle-link-active-background-color: red;
$tabs-toggle-link-active-border-color:red;
$tabs-toggle-link-active-color: $link-invert !default;
// Import Bulma and Buefy styles
#import "~bulma";
#import "~buefy/src/scss/buefy";
}
</style>
Worth noting that you do not have to import bulma and buefy for each component, it's better to import main/general styles in main file and then import only necessary components (#import "~bulma/sass/components/tabs";).

How to do breakpoints in scss file with vuetify?

How to use media query breakpoints in my vuetify application but in scss file?
For example bootstrap enable me to do that in scss file:
#include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
what is the equivalent in vuetify? I can't find any documention in vuetify website
You can do it in scss:
#import '~vuetify/src/styles/settings/_variables';
#media #{map-get($display-breakpoints, 'sm-and-down')} {
.custom-class {
display: block;
}
}
... and you're right there is very little docs regarding breakpoints within vuetify
I achieved this by attaching a class name corresponding to the breakpoint, which is available in the $vuetify.breakpoint object. Not a perfect solution, but I only needed to do it for once element in my app. Hope it helps!
Example:
<item :class="($vuetify.breakpoint.smAndDown) ? 'sm' : ''"></item>
...
<style scoped lang="scss">
#item{
right: 130px;
&.sm{
right: 35px;
}
}
</style>

vue cli global body style not included in build

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!

Conditionally override css in Style tag

Assuming I am using a plugin that generates html at runtime where I cannot edit the CSS or JS code, leaving me with the only option of overriding certain CSS in particular classes. For instance, in such case I'd often do:
.video-player{
max-height: 500px !important;
}
In case such styling must be handled conditionally based on the props passes to the component, for instance:
<videoPlayer :goSmall="anotherColumn != null"></videoPlayer>
since the CSS in the videoPlayer components must go in the Style tag:
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
how can I render it conditionally?
It is such a bad idea to append it to the DOM using lifecyle hooks, so please do not suggest anything like that.
Why not apply a specific class to the component instead of passing a prop?
<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>
And the css
<style scoped>
.video-player.small {
max-height: 500px !important;
}
</style>
If you are not okay with dynamically applying CSS using lifecycle hooks. You can always box your components. Make two components for your videoPlayer, we'll call them videoPlayerOriginal and videoPlayerSmall.
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
Add your css in videoPlayerSmall.vue
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
Now render either one of them conditionally.