Why do I import scoped but it still affects other components.I have consulted this article but the solutions are generating error [https://stackoverflow.com/questions/49653931/scope-bootstrap-css-in-vue]. Thanks.
<style scoped>
#import '/public/admin/bs3/css/bootstrap.min.css';
#import '/public/admin/css/bootstrap-reset.css';
#import '/public/admin/font-awesome/css/font-awesome.css';
#import '/public/admin/css/style.css';
#import '/public/admin/css/style-responsive.css';
</style>
Related
My npm project: Vue 2 with Bulma as the CSS framework
I am trying to create a card component and want to change the color of the header's text that is inside a div with class card-header. However, the color of the text just won't change.
Component.vue
<template>
<div class="card">
<div class="card-header p-3">MON</div>
<div class="card-content">
<slot></slot>
</div>
</div>
</template>
main.scss
i have used sass variable $card-header-color: white; but it does not change the text color. How do i do this?
....
$card-radius: 0;
$card-shadow: transparent;
$card-header-color: white;
$card-header-shadow: transparent;
$card-header-background-color: black;
#import "../node_modules/bulma/sass/utilities/_all.sass";
#import "../node_modules/bulma/sass/base/_all.sass";
#import "../node_modules/bulma/sass/elements/container.sass";
#import "../node_modules/bulma/sass/helpers/_all.sass";
#import "../node_modules/bulma/sass/components/card.sass";
I know I would be able to achieve this using pure CSS by overwriting the styles of that element but wanted to know why using $card-header-color won't work in my case.
I hope to be able to achieve the desired result using SASS variable $card-header-color as documented in the Bulma docs. under the variables section of the card component.
https://bulma.io/documentation/components/card/
here I have a problem. in nuxt 2 I can use #import inside the tag, but not in nuxt 3?
does anyone know how i should make it work in nuxt 3?
I was expecting like this.
...
<style scoped>
#import url('assets/css/custom.select2.css');
...
</style>
and what do I need to install and what setup should I do?.
Thank you in advance
After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).
Old, working code (no stylus):
<style>
.item {
background-color: $bgColor;
}
</style>
New code, doesn't work (w/ stylus):
<style lang="stylus">
.item
background-color: $bgColor;
</style>
Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
Trying to create a new component style using the $display-breakpoints stylus variabled from Vuetify (as described in this answer) but it doesn't seem to work.
<style lang="stylus">
.submit-container
#media $display-breakpoints.sm-and-up
font-size 5em
</style>
I get the following error:
$display-breakpoints has no property .sm-and-up
I needed to import the variables stylus file:
<style lang="stylus">
#import '../../assets/style/variables.styl'
.submit-container
#media $display-breakpoints.sm-and-up
color #ef4655;
</style>
My problem is that I have several DIVs that all look like this:
<div class="col-sm-4 col-md-3 col-lg-2">
...
The thing is, if I decide to change the layout of this, I want to change all of them at once. I tried doing this:
CSS:
.product-layout {
#extend .col-sm-4;
#extend .col-md-3;
#extend .col-lg-2;
}
HTML:
<div class="product-layout">
...
But this didn't work. Is there some way to do this?
In order to be able to use extend, you should also make sure that you use #import to include bootstrap in your project.
(cfr. http://sass-lang.com/guide#topic-5)
so basically you would use #import "bootstrap"; (using the bootstrap sass project: https://github.com/twbs/bootstrap-sass).
If bootstrap isn't included in your scss, you won't be able to extend the classes.
example:
/* Import bootstrap-sass so that we have access to all of its selectors */
#import "bootstrap";
.product-layout {
#extend .col-sm-4;
#extend .col-md-3;
#extend .col-lg-2;
}