css loader如何解析webpack中的資源

Question

我正在學習 webpack 中的 css-loader，定義說

css-loader 像import/require() ) 一樣解釋@import和url() ) 並解析它們。 這是什么意思，在文檔中的一個例子中有

url(image.png) => require('./image.png')

所以我的問題是將url('./image.png')轉換為require('image.png')

例如，在 css 文件中，如果我的背景屬性為

#selector{
   background:url('./image.png'); //this is a vlid css property
}

將上述樣式轉換為

#selector{
   background:require('./image.png'); // this is not a valid css property
}

如果這是轉換的方式，而不是background:require('./image.png') is not valid css，我的理解是否有問題，可能是我沒有得到 css-loader 的實際作用。 我瀏覽了 css-loader 的文檔。

誰能解釋我錯在哪里。

Answer 1

如果只是理解，webpack 完全基於 js。 這意味着必須有一種方法來檢查文件是否存在、復制文件或采取進一步的行動。 在 endfile 中，它只是 css 語法，帶有“替換/解析”URL。

background:url('wp-content/themes/yours/assets/image.png');