I have following structure:
-src
-assets
-css
-img
-js
In my style.css I have this line:
background: url(~assets/img/arrows.png) no-repeat;
And get this error
Module not found: Error: Can't resolve 'assets/img/arrows.png'
what do I do?
I tried to write ./assets/, ../assets/ , ./src/assets still doesn't work
If you've imported the css file in App.vue or any other .vue file make sure the url is relative to that *.vue file
This issue can come up in Nuxt.js projects. If you're seeing this issue there, you'll have to either use a tilde (~) with no slash in front of the absolute path or you have to use a tilde and an at sign (#), so either this:
background-image: url('~assets/img/arrows.png');
Or this:
background-image: url('~#/assets/img/arrows.png');
Related
I'm using Nuxt and I have an external scss file, how can I access assets path to use the background-image property?
I have already tried to use this background-image: url("~assets/images/myurl.png") but it didn't work.
I tried using the inline style and it worked but is there any other way without using the inline style?
I'm using bootstrap-icons in my VueJS app. After loading the page, these errors appeared
Failed to decode downloaded font
OTS parsing error: invalid sfntVersion: 1008813135
for bootstrap-icons' .woff and .woff2 fonts.
Here is the font loading part in the bootstrap-icons.css file:
#font-face {
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d")
format("woff2"),
url("./fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}
Here is the import for bootstrap in my css file:
// Bootstrap
#import 'bootstrap';
#import '~bootstrap-icons/font/bootstrap-icons';
This error also happens on my production server, but with Font-Awesome, which working fine on my dev server.
Can you suggest any way to fix this, or where the source of the problem might be? I've searched the whole internet but still don't have any clue.
I've found the issue. It was my public folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.
P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts folder. Would any one suggest a way to manage this problem?
I do not exactly know the solution to your problem but I did a little research and found this Link
There are numerous solutions on it, I hope one of those might help you.
<img src='#/assets/image.jpg'> works fine, and is translated into /static/img/image.xxxxx.jpg. However trying to use it in CSS like background-image:url('#/assets/image.jpg'); does not work. It is left unchanged in the resulting html. Using Vue, but I believe it is Webpack that is doing the expansion of "#".
In the <style> tag and CSS files, URLs with aliases must be prefixed with ~, which tells Webpack that the path is not relative to the current directory and requires path resolution. Your CSS should look like this:
background-image: url('~#/assets/image.jpg');
I'm trying to import CSS in a component inside the style sections and no matter what path I provide (which I have double checked and it is 100% correct), the app fails to build due to not being able to find that file.
Assuming I have added a.css to the assets folder under the src folder which results in the following path #/assets/a.css or ./src/assets/a.css, when I import the file with the following code, it always fails due to not being able to find the file. The same error happens when pointing to the static folder as well.
<style scoped>
#import '#/assets/a.css'
</style>
How can this be done? I need to scope CSS to components and reuse them.
I'm making use of the resolve-url-loader which is working great for importing third party stylesheets that are in turn linking to their own assets.
However, i'm struggling to understand how in the instance below my reference to owl.jpg from app.scss manages to successfully resolve?
Folder structure:
src/
|
|- index.html
|
|-img/
| owl.jpg
|
|- scss/
| app.scss
|
|-js/
| app.js
app.scss
These incorrect paths to the asset still seem to resolve?
.owl {
background: url('owl.jpg');
}
.owl {
background: url('/owl.jpg');
}
.owl {
background: url('img/owl.jpg');
}
Surely the path should only resolve with the below path?
.owl {
background: url('../img/owl.jpg');
}
Am i missing something? Is the resolve-url-loader clever enough to resolve incorrect paths??
You have to compile your scss file to css, browser works only with .css files. Then choose the output folder, i guess it can be src/css, and then enter a correct path in your css depending on images folder.
If webpack compiles scss files without errors, it just could be incorrect url to image. If correct, background-size property should be added with 100% 100% parameters.
.owl {
background-image: (path/to/image.img);
background-size: 100% 100%;
}