Webpack solves the problem of style URL () background image

Time:2021-1-24

Positioning error

The project is compiled with webpack4, and the background image specified by URL method in the packaged style cannot be displayed normally

.bgurl{
  background-image: url('/images/abc.jpeg')
}

Error in compiling the above style in webpack. The configuration is as follows

// stylus
[
  loader: MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
    }
  },
  'postcss-loader',
  'stylus-loader'
]

Always explode pictures not found error, according to the solution found online, completeMiniCssExtractPluginConfiguration itempublicPath, but it still goes wrong. It seems that the problem is notMiniCssExtractPlugin. After careful investigation. It’s a mistakecss-loaderIt exploded at compile time.

Find it on NPMcss-loaderConfiguration, find the following

Name Type Default Description
url {Boolean\ Function} true Enables/Disables url/image-set functions handling

url
Type: Boolean|Function Default: true

Enables/Disables url/image-set functions handling. Control url() resolving. Absolute URLs are not resolving.

Examples resolutions:

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('https://imgs.developpaper.com/imgs/2112.png') => require('https://imgs.developpaper.com/imgs/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

attributeurlThe default value is true. By default, this attribute forcibly interprets the image located by URL in the style, and addresses the image address by default (the same source address as CSS). Because the same source address image does not exist (the actual image exists in another directory), the compilation error is caused.

Fix webpack configuration

[
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '//localhost:3000/', 
    }
  },
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
      url: false 
    }
  },
  'postcss-loader',
  'stylus-loader'
]

publicPath
This configuration can be shared webpack.output Configuration, but it is recommended thatMiniCssExtractPlugin.loaderIt can be set independently in. There are two reasons

  1. The pictures in the URL (…) of CSS are generally relative path addressing pictures
  2. Operation and maintenance will provide static resource server with exclusive domain name address

url
takecss-loaderThe configuration URL of is set to false, so that the CSS loader does not parse the image address of URL (…) in the style and keeps the original attribute

So far, the background image problem of webpack packaging style URL () has been solved, and I hope it can help you

Open source project

Recommended Today

Practice of query operation of database table (Experiment 3)

Following the previous two experiments, this experiment is to master the use of select statements for various query operations: single table query, multi table connection and query, nested query, set query, to consolidate the database query operation.Now follow Xiaobian to practice together!Based on the data table (student, course, SC, teacher, TC) created and inserted in […]