I'm having problems getting css background images showing when using webpack.
I have the following css class:
.fb {
display: block;
width:30px;
height: 30px;
background-color: red;
background-image: url('../images/icons/facebook.png');
}
Usage (Using React so className not class):
<div className="fb"></div>
Below is an image of my 'web_build' folder where webpack bundles all my files into. Highlighted is the culprit image.
The following is the bundles SCSS files which I see in the Network tab of chrome dev tools. No images files show on the 'Img' tab.
.fb {
display: block;
width: 30px;
height: 30px;
background-color: red;
background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png);
}
All I see rendered is a 30x30px red square.
NOTES:
If I directly reference the image using an <img> tag, the image shows.
I'm using webpack-dev-server
I'm using image-webpack-loader with the following configuration
{
test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
Let me know if any other information is needed.
Thanks.
After some more searching around it turns out that including sourceMap in my CSS/SASS bundling breaks relative image URLs in CSS.
Solution: Turn sourcemaps off or specify a fully qualified publicPath URL.
The following worked for me.
publicPath: 'http://localhost:8080'
More information here
https://github.com/webpack/style-loader/issues/55
The image-webpack-loader only compresses the images using imagemin.
Use url-loader or file-loader to load the file into your css.
Related
I'm using css modules in a create-react-app project (React V17.0.2 / React-Scripts V4.0.3). All seems well in local but the styles break in production (hosted on netlify).
I believe the problem is that the css modules are not recognizing variables I've defined globally in plain css files. Here's an example of the set up I came up with:
index.css file imported at the top level index.js in my react project:
#import '../Global/ColorScheme.css';
body {
// body styles
}
a {
// global a tag styles
}
ColorScheme.css:
:root {
--green: #00b890;
--pink: #ef767a;
--brown: #554348;
--orange: #fb8f67;
}
Then some CSS module consuming global styles from ColorScheme.css..
SomeFile.module.css
.greenBox {
background-color: var(--green);
height: 500px;
width: 500px;
border: 1px solid #333;
}
Example Component
import React from 'react';
import styles from '../somePath/SomeFile.module.css';
export default function MyComponent() {
return <div className={styles.greenBox} />;
}
When I run it locally I will get a green box with height & width at 500px with a 1px solid black border around it. So all is working as expected. However the production build will show a 500px by 500px box with 1px solid black border but no background color. I'm guessing it's the disconnect is when a css module is using a variable defined in a plain css file. Maybe something with the way webpack compiles down a create-react-app for production build?
Does anyone have any ideas as to why this might be happening and any way I can get around it? I've seen instances of global variables in css modules but I'm trying to avoid importing the global styles in every single module.
I found the solution to my own problem and originally had that solution in the OP as an edit. Moving this to 'Answer my own question' so it's more clear if someone finds this issue in the future:
I found a work around by chance, but I don't understand the 'why' or 'how'. It seems like my custom CSS properties defined in :root were working, just not the ones I titled with color names (i.e. --navy, --green, --orange, or even --gray-scale-0). After running create-react-app's standard npm run build the produced main.css file would replace my css like this:
Some CSS Module Before Build
.someClass {
color: var(--green);
background-color: var(--gray-scale-0);
}
Same Class in Main.####.chunk.css After Build
.someClass {
color: var(green);
background-color: var(gray);
}
Changing my custom properties to something like --theme-orange or --theme-green works just fine. I'm still new to webpack and preprocessors so if anyone knows why this happens I'd love to know.
You should define the variable with $ and use it also with $ without any problem =>
$green : #00b890;
.greenBox {
background-color: $green;
}
I'm using a video plugin for my wordpress site.
I want to change the width of the videos.
However it seems like I'm not using the correct path for the id, as I'm not seeing any changes from my css styling.
This is the info I have gotten from using the editor in chrome:
I want to change the inline styling, so I read I had to use !important to overrule it. But for testing I just used bg-color.
I have tried to access the video with these attempts with no success:
.vjs-tech {
background-color: red;
}
#player_html5_api.vjs-tech {
background-color: red;
}
#player_html5_api {
background-color: red;
}
video#player_html5_api {
background-color: red;
}
After a good chat with Gosi, I found the issue to be the video I wanted to be changed had its css located in another folder than the regular wordpress css folder, since it's a plugin. So I had to go in the plugins css folder and make my changes there.
Currently I have a Vue.js project with this file tree (showing only relevant folders and files):
root
src
assets
image.jpg
components
header.vue
index.html
So inside the header.vue component, I have this CSS code:
.background-image {
background-image: url();
}
and I need to reference the image.jpg file inside the assets folder. I tried so many different combinations and never saw the image, so I just can't figure it out.
You could try the following:
.background-image {
background-image: url('../assets/image.jpg');
}
If it's not showing, one possible reason is that, the element .background-image doesn't have a height especially if it doesn't have any content yet. Try adding padding or height.
.background-image {
background-image: url("../assets/image.jpg");
padding: 50px;
}
In my view I can load a image with this line of code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div> (this works), but instead I want to load the image from the CSS file.
After reading arround, I have tried this:
#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}
...but the picture won't load on the page.
How can I make it work?
(The image is in /assets/images)
I think you'll have to do a couple of things. Your CSS should probably be something more along the lines of this:
#bglion { background: image-url('BG-LION6.PNG'); }
background is the CSS property you're actually trying to set. src is not a CSS property. image-url is a Rails path helper that points to your image assets folder. I believe if you just use asset-url it points to your entire assets folder and you would still have to specify that your image is in the images folder.
Secondly, if your div no longer contains an image within it, it will collapse to a width and height of 0 cause there's nothing to define its dimensions. You'll have to add more CSS to the wrapper div to define the dimensions of the image. So something like this:
#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }
Try to do this instead:
#bglion { background: url("/BG-LION6.png"); }
or
#bglion { background: url("/assets/BG-LION6.png"); }
Depending on which version of rails you're using and which folder you set your assets at.
When accessing assets, you should always make the path absolute instead of relative.
You can change your css file to have a css.erb extension and then do something like this
#bglion {
background-image: url(<%=asset_path "BG-LION6.png"%>);
}
I already tried many different approaches and none work, am I missing something here?
This is what I have tried...
th a.asc {
background-image: url(up_arrow.gif);
}
th a.desc {
background-image: url(down_arrow.gif);
}
and
th a.asc {
background-image: url("assets/up_arrow.gif");
}
th a.desc {
background-image: url("assets/down_arrow.gif");
}
and
th a.asc {
background-image: url(assets/up_arrow.gif);
}
th a.desc {
background-image: url(assets/down_arrow.gif);
}
and
th a.asc {
background-image: url(<%= asset_path "up_arrow.gif" %>);
}
th a.desc {
background-image: url(<%= asset_path "down_arrow.gif" %>);
}
and...
th a.asc {
background-image: asset-url("up_arrow.gif", image);
}
th a.desc {
background-image: asset-url("down_arrow.gif", image);
}
and many more.
I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb
I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.
But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.
Your last example using asset-url should work, assuming a few things...
The asset pipeline is actually enabled (in config/application.rb look for config.assets.enabled = true)
You have sass-rails is in your Gemfile
If sass-rails is part of a group in your Gemfile (say, the :assets group), you have to make sure that group of gems is being loaded by Bundler in your development environment. In your config/application.rb you should see something like this:
if defined?(Bundler)
# This loads your :assets group in the development and test environments
Bundler.require *Rails.groups(:assets => %w(development test))
end
This particular stylesheet is a SASS stylesheet (i.e., should have the extension .SASS or .SCSS because asset-url is a helper from the sass-rails gem)
This stylesheet is actually loaded in the asset pipeline (it should be named application.css.scss or be required/#included by application.css.scss)
If after all of this is true you still have issues, well, then I'd say something silly is going on.
Your first one looks fine and works for me. So a few things to check:
Is you image up_arrow.gif in the same directory as the CSS file? (Or, if your CSS is in the HTML page, then the same directory as the html file)
Use the debug tools in a browser, like Firebug in Firefox or in Safari right-click and select "Inspect Element" (turn on developer menu first in the Safari prefs). Look to make sure the computed CSS properties are what you expect, and then look at the resource / network tabs to see that the browser is trying to load your image from the right location.
Is the image being used as a bg image but just not visible because the A element is too small? If you have no text in your A element it will be 0x0. If it has text and/or size properties it might still be too small if the background image has a bunch of blank space. Try making the A tag larger to see if this is the case. E.g. add a width and height property to your CSS, but also a display: block property seems to be necessary.
If you want an image to be the button, you could also just put an IMG tag inside the A tag. It might be a bit easier, though you can get the CSS to work if you want.
This works for me:
<html>
<head>
<style type='text/css'>
th a.asc {
background-image: url(up_arrow.png);
width: 32px; height: 32px; display: block;
}
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>