undefinedfix
Sign in

React doesn't work in less. How to use it?

dudeprime edited in Fri, 01 Apr 2022

Problem description

Use less to write CSS, you need to set a background image, how to set it doesn't work.

Related codes

.check{
    width: 10px;
    height: 8px;
    position: absolute;
    background-image: require('./images/[email protected]') no-repeat 10px 8px;
    right:1px;
    bottom:2px;
    z-index: 20;
}

Alternative ways

Use style in your code instead.

import checkImage from './images/[email protected]'

const checkStyle = {
  backgroundImage: `url(${checkImage})`,
}

How to make the background image written in CSS work? What causes this?

background-image: url('./images/ [email protected] ) no repeat 10px 8px; error in the above writing: module not found: can't resolve 'images/ [email protected] '

Directory path

src |--components |----|--Check |-------|--images |-------|-- index.js |-------|-- index.less | |--routes |----|--Shop |-------|--List |-----------|-- index.js

I tried the absolute path and made the same mistake.
3 Replies
zkuir
commented on Fri, 01 Apr 2022

Your webpack.output.publicPath What value is set?

output: {
    
    // 省略其他配置...

    // publicPath + 图片的URL 为打包后生成的html文件请求图片的路径,其他静态资源文件同理
    publicPath: "/"
}

Is your CSS code extracted into CSS file and then packaged into HTML file with link tag?

Huerta
commented on Fri, 01 Apr 2022

Is there a loader configured to handle images in webpack

obidano
commented on Fri, 01 Apr 2022

Check if the file path is wrong

lock This question has been locked and the reply function has been disabled.