I ve created a vue 3 project
and I have this code where I'm creating a div using jquery.
var div = $(
`<div data-v-3230242e data-item_index='${itemm.index}' data-itemid_name='${item_name}' data-sqlid='${itemm.id}' draggable=true class="itemImage"></div>`
);
div.css(
"background-image",
"url(" + `/assets/images/${item_name}.png` + ")"
);
console.log("ééé");
let container = $(`#mainBar .backbag_inventory #${box.id}`);
console.log(container);
container.append(div);
PS: When i'm runing npm run serve ( the vue server) everything works fine.
So I checked that the div is created but its background image cannot be set.
This is my vue.config.js
module.exports = {
publicPath: './',
filenameHashing: false,
lintOnSave: false,
outputDir: '../client_packages/gamemode/vuebrowser'
}
I have some static divs, however its background image are set.
divs css:
#backbag {
background: url("../../assets/images/backbagstatic.png");
background-repeat: no-repeat;
background-size: 95% auto;
object-fit: contain;
background-color: rgba(7, 10, 22, 0.796);
}
I tried those with the urls too but couldn't get it to work :
"url(" + `../../assets/images/${item_name}.png` + ")"
"url(" + `./assets/images/${item_name}.png` + ")"
And the builded folder is this:
Build Folder
Please can anyone had the issue before, help me and thank you
I'm working on a Vue.js Project I need this
Download Chart
I tried to create a Component like this.
import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';
Vue.component('justgauge', {
name: 'justgauge',
mounted () {
var g1;
document.addEventListener("DOMContentLoaded", function(event) {
g1 = new JustGage({
id: "justgauge",
value: 72,
//title: "Completed",
fill: '#ffa726',
symbol: '%',
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.4,
counter: true,
hideInnerShadow: true
});
});
}
})
I'm getting errors like this-
gauge/raphael.min.js
Module build failed: SyntaxError: Deleting local variable in strict mode (10:22810)
Note: I've used Justgauge.js and raphael on my Local Library. Any help will be highly appretiate.
I made a JustGage component for Vue Js. You can find it here:
https://github.com/agronick/KGauge
The gauge you want would look something like this:
<k-gauge
title="Completed"
:value="72"
:color-steps="['#ffa726']"
:width="500"
:height="300"
:max="100"
:gauge-size="0.4"
:format-function="(x) => `${x.toFixed(2)}%`"
:show-min-max="false"
:doughnut="true"
:shadow-opacity="0"
/>
I have recently moved to using BrowserSync, I followed their gulp guide and tweaked a few things to solve some issues I was having, however now whilst it works, it appears to reload the page every time rather than inject the CSS.
My gulp file:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
gulp.task('scripts', function() {
return gulp.src([
'js/dev/main/**/*.js',
// We have to set the bootstrap lines separately as some need to go before others
'js/dev/bootstrap/alert.js',
'js/dev/bootstrap/collapse.js',
'js/dev/bootstrap/tooltip.js',
'js/dev/bootstrap/popover.js',
'js/dev/bootstrap/tab.js',
'js/dev/bootstrap/transition.js',
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'));
});
gulp.task('uglify', ['scripts'], function() {
return gulp.src('js/scripts.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('./js'));
});
// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
browserSync.reload();
done();
});
/* Creates the standard version */
gulp.task('styles', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
});
/* Creates the minified version */
gulp.task('css-minify', ['styles'], function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact' // Options: nested, expanded, compact, compressed
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}),
]))
.pipe(cleanCSS({
advanced: false,
aggressiveMerging: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css/'));
});
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "bmmedia.dev",
host: 'bmmedia.dev',
// port: 5000,
browser: "chrome",
});
});
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});
gulp.task('default', ['js-watch', 'css-minify']);
Notice my watch task, this was the most recent change I did as I was having the problem specified here, and I solved it with this answer, however now whilst it works fine, it appears to only reload, rather than inject.
Is there something I can do to fix this?
Edit:
I just realized it was reloading every time because I was running js-watch every time there was a change, even to .scss files, so I changed it to this:
gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
However now it doesn't inject OR reload when a .scss file changes.
I believe I have fixed it...
My watch task I changed to:
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(['scss/**/*.scss'], ['css-minify']);
gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});
Then in my styles task I changed this line:
.pipe(browserSync.stream(({match: 'css/**/*.css'})));
to:
.pipe(browserSync.stream());
Not sure why it wasn't finding the CSS changes, all I know is it now seems to work.
You can also try just watching the compiled output files.
Dest/css/styles.css
Dest/js/my.js
Any changes to a sass / js module would reflect in the final css / js output files. Browser reloading will only fire when the css/js compilation has completed, rather than trying to reload as the sass /js bundles compile.
Also, take a look at Gulp-newer. It can be used for checking / triggering tasks if the final output file (dest/css/styles.css) has been changed relative to the files that made it (src/sass/**.scss).
This is also very handy for images (no need to minify them on each build, only if newer) any other checks you need to perform only if something has changed can also be added.
Having used Gulp all the time for 2 last years, I've suddenly got a problem with the less file imports and just can not resolve it.
I've tried more then 5 combinations, such as from SmashingMagazine, from gulp-less homepage, etc... none worked for me.
The problem is (error log in console output):
C:\wamp\www\lumenframe>gulp less
[10:23:25] Using gulpfile C:\wamp\www\lumenframe\Gulpfile.js
[10:23:25] Starting 'less'...
Potentially unhandled rejection [2] '/bower_components/animate.css/animate.css' wasn't found. Tried - /bower_components/animate.css/animate.c
ss,bower_components\bootstrap\less\bower_components\animate.css\animate.css,bower_components\animate.css\bower_components\animate.css\animate
.css,bower_components\font-awesome\less\bower_components\animate.css\animate.css in file C:\wamp\www\lumenframe\bower_components\assets\l
ess\appstrap.less line no. 43
Gulpfile.js looks like this:
// Init Gulp
var gulp = require('gulp');
// Dependencies
var less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-uglify');
// Folder paths
var jsdir = './bower_components/assets/js/',
jspub = './public/assets/js/',
lessdir = './bower_components/assets/less/',
lesspub = './public/assets/css/';
// LESS compiler
gulp.task('less', function () {
return gulp.src(lessdir + 'frontend.less')
.pipe(less({
compress: true,
paths: [
'./bower_components/bootstrap/less/',
'./bower_components/animate.css/',
'./bower_components/font-awesome/less/'
]
}))
.pipe(autoprefixer('last 10 versions', 'ie 9'))
.pipe(gulp.dest(lesspub));
});
// Concatenate and Minify JS
gulp.task('scripts', function () {
return gulp.src(jsdir + '*.js')
.pipe(concat('appstrap.js'))
.pipe(gulp.dest(jspub))
.pipe(rename('appstrap.min.js'))
.pipe(uglify())
.pipe(gulp.dest(jspub));
});
// Filewatcher for changes
gulp.task('watch', function () {
gulp.watch(jsdir + '*.js', ['scripts']);
gulp.watch(lessdir + '*.less', ['less']);
});
// Default Task combination
gulp.task('default', ['less', 'scripts', 'watch']);
All files are in their proper place, so they exists. And once I do #import appstrap.less, it comes out with the error **Potentially unhandled rejection [2].
frontend.less looks like this:
// Core source files of the whole frontend plugins
#import (once) "appstrap.less";
.btn{
color: #ff0000;
display: block;
}
Any visible errors ?
Having a very weird breakpoint problem.
Screen.scss contains the most basic breakpoint example:
#import "breakpoint";
$high-tide: 500px;
.johnny-utah {
color: blue;
#include breakpoint($high-tide) {
content: 'Whoa.';
}
}
This gets compiled to:
.johnny-utah {
color: blue;
}
Seems like breakpoint is not returning anything. It used to work before.
Compass 1.0.1, Breakpoint 2.5.0 and SASS 3.4.3 running on OS X.10.
My config.rb is nothing special:
# Require any additional compass plugins here.
require 'breakpoint'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
preferred_syntax = :scss
Never mind, this was my most stupid error ever!
This was an old project and I thought I was using Breakpoint back then, but no ... I used my own mixin called _breakpoint.scss which looked like this:
#mixin breakpoint($breakpoint) {
#if $breakpoint == tablet {
#media only screen and (min-width: 768px) { #content; }
}
#if $breakpoint == desktop {
#media only screen and (min-width: 1024px) { #content; }
}
#else if $breakpoint == big_desktop {
#media only screen and (min-width: 1280px) { #content; }
}
}
That's why nothing was outputted ..