javascript - css loader如何解释css中的@import和url()

Question

如何css-loader解释 css 中的 @import 或 url()

例如，如果我在（index.js）模块中导入（Style.css）

import './Style.css';

function Component(){
   //javascript code
}

我的（Style.css）文件，如果我有

body{
  background:url('./image.png')
}

所以，当 webpack 看到in模块import时，如何解释背景属性的语法。将转换为.Style.cssindex.jscss-loaderurl()url('./image.png')require('./image.png)

例如将

body{
  background:url('./image.png')
}

转换成

body{
  background:require('./image.png')  //not a valid css syntax
}

因为在文档中有解析示例，例如：

url('./image.png') => 要求('./image.png')

所以，我想知道整个url('./image.png')语法是否被替换为require('./image.png'). 如果是这种情况，则backgroundwithrequire()不是有效的css语法。

解释url()为是否require()意味着将其转换为require()其他内容。

score 0 · Accepted Answer

不幸的是，它并不像替换内容那么url(<>)简单require(<>)。

css-loader首先加载必要的插件，包括url-parser

1 回答 1