Reputation: 61
I'm fairly new to webpack but having some problems with css-loader or file-loader in react
I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style.
I'm trying to load this background image via css file in React: background: url('../../assets/img/1017.jpg') no-repeat right;
here is my web pack config:
[![const path = require("path");
module.exports =
{
mode: "development",
entry: path.resolve(__dirname,`src`, `app`),
output:{
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath:'/'
},
resolve: {
extensions: \['.js','.jsx'\]
},
devServer:{
historyApiFallback: true
},
module: {
rules:\[{
test: /\.jsx?/,
loader:'babel-loader',
exclude: '/node_modules'
},
{
test: /\.(jpg|png)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},
{
test: /\.(jpg|png)$/,
use: {
loader: "file-loader",
options: {
name: "\[path\]\[name\].\[hash\].\[ext\]",
},
},
},
{
test:/\.css$/,
use:\['style-loader','css-loader',\]
},
\]
},
}
Upvotes: 0
Views: 647
Reputation: 9235
You have used background-image
with no-repeat
and center
. background-image
accepts only url(...)
. Read more here
Just replace background-image
with background
.loginLeft{
background: url(data:image/...) no-repeat center
}
Upvotes: 0
Reputation: 11
you have added no-repeat and center value in background-image property, instead you can use background property.
Upvotes: 1