webpack的css-loader的介绍是意思?

咯咯咯哒
  • 36

问题描述

css-loader的npm包链接传送介绍有一句话是这样的:

The css-loader interprets @import and url() like import/require() and will resolve them.

这句话的直接翻译:css-loader像import和require引入的方式一样去解释@import和url()

问题

(1)不是很理解这句话。什么叫像import/require()解释@import和url?
(2)看到网上有些人说,css-loader的作用是使css可以被webpack模块化处理,那css-loader不应该是找到js文件中引入css的语句并且解析出来?
(3)引入无非import或者require这样,那何来“像import/require()”
(4)“解释@import和url()”该怎么理解,指的是import或require的css文件中存在@import或者img/background-image的url的解析?
主要是看不懂这句话的描述,感觉虽然能配置,但总是理解不了css-loader的原理

回复
阅读 1.4k
1 个回答
  1. webpack把任何依赖都当作是一个模块,最后组织成一个庞大的依赖树,严格来说应该叫图;
  2. 一般你在js中引入其他的资源的时候,使用import/require,觉得就应该是这样,但你是不是觉察到,这只是js语法的一部分,但在工具层面,把它解释成了引用另外一种资源
  3. 但是我在css中需要引用资源的时候需要怎么做呢,若你也使用import/require,那css中有这种语法么,再想想css中引入资源的语法是什么,当然你可以自己定义所谓的import/require,但别人可能就会模糊了
  4. 说白了,就是为了维持依赖,使用什么方式不重要,但应该是兼容现有东西
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏