css loader如何解析webpack中的资源 [英] How does css loader resolve resources in webpack

问题描述

我正在学习 webpack 中的 css-loader，定义是这样的

I was learning about css-loader in webpack, the defination says that

css-loader 像 import/require() 一样解释 @import 和 url() 并将解析它们.这是什么意思，在文档中的一个例子中有

The css-loader interprets @import and url() like import/require()and will resolve them. What does it mean, In an example in the documentaion there is

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

所以我的问题是它将 url('./image.png') 转换为 require('image.png')

So my question is will it convert url('./image.png') to require('image.png')

例如在 css 文件中，如果我有背景属性

For example in a css file if i have background property as

#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') 不是有效的 css，我的理解有什么问题吗，可能是我没有理解 css-loader 实际上做了什么.我浏览了 css-loader 的文档.

if this is how the conversion take place than background:require('./image.png') is not valid css, is there something wrong in my understanding, may be i'm not getting what css-loader does actually. I went through the documentation of css-loader.

谁能解释我哪里错了.

推荐答案

请阅读 css-loader 解析 urlshttps://webpack.js.org/loaders/css-loader/#url

please read about css-loader resolve urls https://webpack.js.org/loaders/css-loader/#url

如果只是为了理解，webpack 是完全基于 js 的.这意味着必须有一种方法来检查文件是否存在、复制文件或执行进一步操作.在 endfile 中，它只是带有替换/解析"URL 的 css 语法.

if its just about understanding, webpack is fully js based. that means there have to be a way to check does the file exist, copy file or step in further actions. in the endfile it's simply css syntax with 'replaced/resolved' URL.

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

也检查https://www.npmjs.com/package/resolve-url-loader

这篇关于css loader如何解析webpack中的资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！