What does the introduction of webpack's css-loader mean? - Codes Helper - Programming Question Answer

What does the introduction of webpack's css-loader mean?

problem description

css-loader "s npm package Link transfer introduces a sentence that goes like this:

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

Direct translation of

this sentence: css-loader explains @ import and url () in the same way that import and require introduced.

question

(1) I don"t quite understand this sentence. What do you mean by explaining @ import and url like import/require ()?
(2) seeing some people on the Internet say that the function of css-loader is to make css can be modularized by webpack, then css-loader should not find the statement that introduces css into the js file and parse it?
(3) if nothing but import or require is introduced, how can you interpret @ import and url () "like import/require ()"
(4) "explain @ import and url ()", referring to the resolution of @ import or img/background-image "s url in the css file of import or require?
mainly does not understand the description of this sentence. Although it can be configured, it always cannot understand the principle of css-loader

.

Css-loader webpack

May.09,2022

webpack treats any dependency as a module, and finally organizes it into a huge dependency tree, which should strictly be called a graph;
usually when you introduce other resources into js, you use import/require and think it should be so, but do you realize that this is only part of the js syntax, but at the tool level, it is interpreted as referring to another resource
but what do I need to do when I need to reference resources in css? if you also use import/require , is there this syntax in css? then think about the syntax for introducing resources into css. Of course, you can define the so-called import/require , but others may be blurred
to put it bluntly, in order to maintain dependency, it doesn't matter how you use it, but it should be compatible with existing things

Previous: How to remove the run git hooks that is automatically checked for webstorm upload

Next: On the question of js regular expressions.

After configuring css-loader in webpack, an error require is not defined is reported in m browser.
recently I learned that webpack, has its own handwritten configuration, with no embellishment . a.css body {background: red;} main.js require( . a.css ); function a(){} package.json { "name": "cssloader", "version&q...

Require css-loader webpack

Mar.04,2021
Like the vant component library to customize the global style problem in the vue-cli creation project (modify var.css)
< H2 > previously on < H2 > there is a difference in color between the design style and the vant style so you need to redefine the default style of vant < H2 > current practice < H2 > File directory structure var.css(,vantcopy,) base.css ...

Vue.js scss sass css-loader webpack

Mar.11,2021
How to unify the path of picture resources in js and css by webpack packaging
when webpack packages a project, you often have to deal with the path problem of resources, and there are usually several solutions . do not set publicPath , and generate page-based relative paths set publicPath , relative path and absolute path...

React.js vue.js url-loder css-loader webpack

Mar.29,2021
Invalid vue project css-loader configuration alias
after reading the css-loader document, I want to try https: www.webpackjs.com loa. using vue-cli3 to build the project configuration code . css: { loaderOptions: { css: { alias: { @css :...

Css-loader webpack

Feb.13,2022

Menu