I started a project with vue-cli, then I run
npm bulma install
and imported bulma in my App.vue
#import "../node_modules/bulma/bulma.sass";
#import '../node_modules/bulma/sass/utilities/initial-variables.sass'
But I am using their classes and do not work.
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
There were two problems,
I am using sass, and I was not defining it on style tag
<style lang="sass">
And I was missing sass-loader
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/
I have a simple view in Vite + Vue + Sass. For styling i'm using external sass files for each component/view by using module ='classes' in the style tag and #use to use the specific scss file that should style the component/view. This doesen't trigger Vite HMR, I have to manually trigger a refresh in the browser for styles to change. HMR works just fine if I include the styles locally in the style tag, but it doesn't work with an external scss file. Here is an example:
<script setup>
import LogoNav from "#/components/navs/LogoNav.vue";
</script>
<template>
<LogoNav />
<main :class="classes.main">
<div :class="classes.loader"></div>
</main>
</template>
<style lang="scss" module="classes">
#use '#/sass/views/loading-profile';
</style>
My sass folder structure looks like this:
Where im using the global scss files like abstracts, base and utilities in main.scss:
And importing the main.scss file in main.js
Am I missing something crucial here? Have anyone encountered the same problem?
I am trying to learn Vue.js and understand SFCs and importing components into other components. The main App.vue is mounted/loaded into the <div id="app"></div> within an index.html file.
However I have come across a tutorial that does this in the src/index.html file which I don't understand:
<html>
<head>
...
</head>
<body>
<div id="app">
<app></app> <!-- how is it possible to include a Vue.js component here?
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
I don't understand how a regular HTML file can contain reference to a Vue.js component like above. I can't see it being done like this anywhere in the docs.
So I have this Component code
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
How can I include the image in that style section code?
My component is in a directory
src/component/sample-comp/MyComponent.vue
My images are in a directory
assets/images
I already tried using #/assets/images/sample-image.png It wont include the image. It is giving an error below
ERROR Failed to compile with 1 errors 08:53:42
This relative module was not found:
* ./#/assets/images/cta-bg.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18a303e8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/frontend/landing-layouts/CallToAction.vue
You cannot use the # alias as Webpack cannot understand this alias inside the <style></style> tags.
There are two options to do this.
First option:
Since # is mapped as src/ in Webpack, using your component, your path should be background-image: url('../../assets/images/cta-bg.png') in the <style></style> tags.
Second option:
You can use the style binding directly in the <div> tag.
<div :style="backgroundImage: `url(${require(`#/assets/images/cta-bg.png`)})`">
<p>Test</p>
</div>
just update the background URL form
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
To
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("~#/assets/images/sidebar.svg");
}
</style>
Just paid for a commercial licence and trying to follow the docs but can't get the animation to work
I am using Laravel 5.4 and Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
#yield('content')
</div>
<script src="/js/app.js"></script> // vue file
<script src="/js/wow.js"></script>
<script>
var wow = new WOW();
wow.init();
console.log(wow); // works fine
</script>
</body>
// content
#extends('layouts.app')
#section('content')
<div class="wow slideInLeft"> // not working
<p>Test</p> // not working when applied here either
</div>
#stop
Where am I going wrong?
update, wow is being applied to my Vue components but not native html tags.
it seems that style="visibility: hidden;" is not being overwritten.
// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html
<template name="test">
<p class="wow bounceIn>Test</p> // works
</template>
wow.js happens on page load and not on scroll
I was applying height and width constraints with CSS
Removing these made it work