I am trying to use vue bootstrap and I want to set custom colors for my theme I also want to allow my users to switch to a dark theme with a button. I installed vue-bootstrap I have it working just fine I went and followed the instructions on bootstrap4 how to customize the theme so I made a custom.scss file in my assets folder and added this code.
$theme-colors: (
"kimbel-prime": #091F40,
"kimbel-success": #7FC343,
"kimbel-warn": #C74241,
"kimbel-danger": #6E0C2B
);
#import "node_modules/bootstrap/scss/bootstrap";
in order to use this I read on a github site that you ahve to import all of this inside your app.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<b-button variant="kimbel-primary"> I am a Button </b-button>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#import "assets/custom.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import '~bootstrap-vue/dist/bootstrap-vue.css';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
I added this and was hoping to see my button get the new color but it still had just a button color any help would be greatly apperciated this is my first time I am trying to use vue so forgive me for anything I am missing. I think I can tackle switching to a dark theme after I get this working.
Related
I have a bit problem to link vue.js and scss.
I have this AppHeader.vue archive:
<template>
<header id="header" class="header">
<div class="header-container container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li>Servicios</li>
</ul>
</nav>
</div>
</header>
</template>
<script>
export default {
name: "Header",
};
</script>
<style lang="scss">
.header {
background: $accent;
text-align: center;
padding: 10px;
}
.aright {
text-align: right;
}
I have another folder where I have four scss archives. One of them, _base.scss, has the css body like this:
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text-color;
font-family: $font-family-sans-serif;
font-size: 16px;
max-width:100%;
overflow-x: hidden;
}
ul, li{
list-style: none;
padding:0;
margin: 0;
}
.app-container{
min-height: calc(100vh - 61px);
display: flex;
flex-direction: column;
//padding-top: 70px;
}
main{
height: 100%;
flex:1;
}
The problem is that css body is not working on the AppHeader.vue. When I see it on the webrowser, the body has no width.
How can I link them?
Thanks.
Another way to do this is by using this inside the style,
result: <style src='../style.css' scoped>
It's more useful because you can use scoped with this method.
best way for the link your css file to the vue component is the import your css to the App Header.vue component, like this
<style lang="scss">
#import "./path/_base.scss"; // please enter your current path
</style>
course sure that used of webpack in your project that help you for modular
How do you change the color of a fontawesome icon in nuxt? I gave the icon a class name and set the color: #444444" but it doesn't seem to work. The font-size property worked for the icon though.
<div class="icons">
<font-awesome-icon
:icon="['fab', 'github-square']"
class="icons__btn icons__github"
/>
<font-awesome-icon
:icon="['fab', 'twitter-square']"
class="icons__btn icons__twitter"
/>
</div>
.icons {
margin-bottom: 5rem;
&__btn {
margin-top: 2rem;
font-size: 5rem;
color: red;
}
&__twitter {
margin-left: 1rem;
}
}
You should check again whether your fontawesome module is loaded right, or check again whether your css code is compiled right.
I did a demo of use fontawesome in nuxt, hope it will help you.
I created a library in Vue using this tutorial and the library works as expected. But problem comes I install this library and import the module into Vue project I created using yarn add ../vue-okra
and I import it into the my existing vue file as: import OkraButton from 'vue-okra' see the full snippet below:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import OkraButton from 'vue-okra'
export default {
name: 'app',
components: {
HelloWorld
}
}
</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>
when I run a yarn serve on this project to see if the library works in this project, I get the error:
> This dependency was not found: * vue-okra in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
i saw this question but it does not seem to be much help. Please, what am I doing wrong?
i've just created new component with navbar code within:
<template>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
.....
</template>
and my index.html without any changes.
I've tried to make changes based on my googling results, actually set my own style to nav tag didn't help.
If you are using VUE CLI then in you App.vue there will be a style block like this
<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>
because of this margin-top: 60px this white space is there. Vue CLI provides this default styling for their default components, you can remove it.
I hope this helps
So use this in App.vue, reasons to set the default for the web base
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
</style>
I'm having trouble overriding bootstrap styles in my single file component when using bootstrap-vue
My file looks like this:
<template>
<b-tabs pills vertical>
<b-tab title="This title" title-item-class="mytab" acitve>
Some tab
</b-tab>
<b-tab title="This title 2" title-item-class="mytab">
Some other tab
</b-tab>
</b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
I can inspect my component and I can see that the "mytab" class is being added to the li parent divs with nav-item classname but the css isn't showing up.
It works here: https://jsfiddle.net/3xwmm1qt/43/ but I'm pretty sure it's because the css is being loaded after the page renders. I'm not 100% about that.
Updated I also tried removing the 'scoped' attribute from the style tag and the css still would work. It still doesn't even show up when I inspect the div. I can still see the classname, but in the Rules tab (using FF) there's no styling for my custom classname.
Yeah the difference between the jsfiddle and your code is that you've written scoped CSS (less):
Here's how you fix it, Remove the scoped from style:
<style lang="less">
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
Scoped means that the css code will only work in this element and vue will try to do it only for the classes attached to the elements which have the class you tried to override while not being scoped means that it'll do it for the entire document hence will override bootstrap's css.