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
Related
I'm trying to load a company font from a node_modules folder which only includes fonts and icons, it was working locally. At first, I thought it was because Vite/Rollup don't have the ~ by default, so I added an alias in vite config, but actually what I think really happens is that Rollup simply disregard (doesn't include) my node_modules/#company because I'm not importing any JS/TS code from it (it's just fonts/icons), so I assume that Rollup is probably skipping or ignoring that in the tree shaking process during the prod build because the only time it's reference is through the #import in my scss file which is probably not enough.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
this only works locally, it doesn't work from a build (I get 404)
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('~#company/icons/fonts/comp-icon.woff2') format('woff2'), url('~#company/icons/fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
So like I said, I think Rollup is ignoring my node_modules/#company folder completely during the prod build tree shaking process.
I looked for why it doesn't work and came across this post in a similar issue, that person used rollup-plugin-copy lib to copy the font into the public assets folder and that seems to work for me but is not ideal since it copies font from one place to another on every build.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
copy({
targets: [{ src: './node_modules/#company/icons/fonts/**/*', dest: 'public/assets/fonts'
}],
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
and using it with
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('fonts/comp-icon.woff2') format('woff2'), url('fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
It seems to work but I think it's just an ugly patch, I don't really wish to keep this copy process unless I really have to. My project is a Vue 3 + Vite + Vitest, however I assume that my problem is stricly a Vite/Rollup problem.
What is the correct way to load custom company fonts from a node_modules that I believe gets excluded from Rollup at the tree shaking process? What do I need to do to get this working and expect Rollup to include all my fonts files (woff, woff2, ttf) in my final prod build?
EDIT
Creating an alias like this SO that was provided in the comments did help with my use case. However in my case I wanted to keep # as an alias to src so I added a ~ alias, it's similar to how it works in WebPack except that I need to add a trailing slash after the tilda, it would be nice to find how to make it the same as WebPack (path.join is suppose to help but that didn't work) but for now it's acceptable
resolve: {
alias: {
'~': path.resolve(__dirname, './node_modules'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
#font-face {
font-family: 'se-icon';
src: url('~/#company/icons/fonts/se-icon.woff2') format('woff2'), url('~/#company/icons/fonts/se-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Referencing files from within node_modules folder works for me in Vite 4.0.1
Might be that it's because I'm using tailwind, IDK.
#import "#openfonts/ubuntu_latin-ext/index.css";
Into a Symfony5 project I use VueJS framework with SFC (Single File Component).
Into my components VueJS style part I need to use "url" css rule with file path definition.
In particulary for background-image design div like this :
<style lang="scss" scoped>
#presentation
{
height: 800px;
width: 100%;
background-image: url('/build/images/presentation.jpg');
}
</style>
My webpack configuration seems to be good for serve public directory because my image is available in my browser with this url : "https://mydomain/build/images/presentation.jpg"
But when I run : npm run dev
for launching webpack encore dev, the process throw error and tell that :
Module build failed (from ./node_modules/#symfony/webpack-encore/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/build/images/presentation.jpg' in '/var/www/myproject/assets/components'
Webpack encore config :
const Encore = require('#symfony/webpack-encore');
const webpack = require('webpack');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVueLoader()
.addEntry('app', './assets/app.js')
.addEntry('index', './assets/index.js')
.addLoader({
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
})
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('#babel/plugin-proposal-class-properties');
})
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.addPlugin(new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: true
}))
.enableSassLoader()
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})
;
module.exports = Encore.getWebpackConfig();
I checked my public web server directory which target my public directory project index symfony very well
I try lot of things of path but the same error throw
Is there css-loader or vue-loader which throw or config error ?
How can I correctly "loading" file path into style part of component VueJS ?
I need custom rules config of vue-loader or css-loader ?
My technical context do not help me to easily understand what is wrong.
Because one component VueJS is used by Storybook AND Symfony with 2 differents webpack config.
But I solve my issue thank to 2 thinks :
first for symfony part : use the ~ character into begin of my url resource file
background-image: url('~/assets/images/lopitofuritarus.jpg')
second for storybook part : do not use file-loader with css-loader
test: /.(png|jpe?g|gif)$/i,
use: [{loader: 'file-loader'}],
Perhaps it can help someone...
I am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.
The issue is that some styles like "Headings" and "Link" are loading properly, while some basic styles like "bold", "italics" are working fine.
For example:
When I use "*hello* world", it gets converted to "hello world".
When I use "# hello world", it does not increase the size of the text.
When I use "[google](https://google.com)", it does create a link, but the link is not blue colored.
Not sure what the issue is here. If any more details are required, please let me know.
Its because of the tailwind.css
in tailwind, h1 - h6 headers dont work.
Option 1)
add this to your tailwind.config.js:
module.exports = {
corePlugins: {
preflight: false,
},
....
}
source :https://github.com/tailwindlabs/tailwindcss/issues/1460
Option 2)Try adding custom css for h1..h6 in your css file.
https://www.w3schools.com/tags/tag_hn.asp copy the styles from here
Similarly try add custom css for other issues.
The solution to this was using Tailwind CSS's typography plugin.
Here are the steps to be followed:
Install the plugin first.
Using npm
npm install #tailwindcss/typography
Using Yarn
yarn add #tailwindcss/typography.
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
Then add the prose class to the element where you are displaying the markdown.
<div class="prose" v-html="cleanedMarkdown"></div>.
This provided the needed formatting for the markdown.
Whenever I try to use background-image: url(~/assets/svg/500.svg)....
I get this error.
I'm currently using TailwindCSS with PostCss module.
This is my package.json file
And here's my nuxt.config.js
I will appreciate any help regarding this issue
Solved it by using GULP
`
var gulp = require('gulp');
var base64 = require('gulp-base64-inline');
/**
* Converts svg and image files to base64
*/
gulp.task('assets', function () {
return gulp.src('assets/scss/*.scss')
.pipe(base64('/assets/../../'))
.pipe(gulp.dest('assets/styles'));
});
usage inside scss, css: background-image: inline(path/to/image.jpg);
i tried to add a font from my local project to vuetify and set that for main font but it does not work.
this is my project:
main folder
public
src
assets
font's
my font
iranyekan.css
node modules
and this is my index.html in public
<style>
#font-face {
font-family: "IranYekan";
src: url("../assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
url("../assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
url("../assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
}
</style>
but it does not work. thanks
Try change your links to use:
#/assets/fonts/IranYekan/iranyekanwebregular.ttf
or ~/assets/fonts/IranYekan/iranyekanwebregular.ttf
or ~#/assets/fonts/IranYekan/iranyekanwebregular.ttf
I don't know how is your project, but vue reference the root directory with ~ or #, so do you can try?
<style>
#font-face {
font-family: "IranYekan";
src: url("~#/assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
url("~#/assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
url("~#/assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
}
</style>