This is the 24th day of my participation in the August Text Challenge.More challenges in August

The last three articles have covered postCSS, but now we’re going to cover one property.

In this article, we mentioned that you can introduce test.css in the index.css file to use in your project. Therefore, we can cut the contents of index.css to test.css and then import the relevant files in index.css with @import. As follows:

Component. js with index.css, index.css with test. CSS, and eventually the contents of the test. CSS file should be valid. Here we run NPM run build in the current project directory to package the package, and the browser will look like this:

As you can see, the style has not been transformed. Why should that be? With that in mind, we need to talk a little bit about how postCSS actually handles code. Let’s open the webPack configuration file and take a look at the resources to match:

As you can see, we need to match the CSS file resource, so when will the CSS resource be matched? The answer is that when you introduce a CSS file resource somewhere, it will match the CSS file resource (in this case, when you introduce index.css in component.js, it will match the index.css resource). So what do WE do when we match the CSS file? The loader is executed from the bottom up (from right to left) in the USE array of CSS resource matching rules. In this example, CSS files are processed using postCSs-loader (in this case, code in index.css), and CSS code (including @import, Since @import is also a syntax in CSS, it is handled (in the case of @import “./test.css”; “), and then use style-loader to process the file.

CSS is processed by postCSS-loader, CSS-loader, and style-loader. CSS is processed by csS-Loader, style-loader, and postCSs-loader. Since the @import syntax itself can be handled directly by CSS-loader, the code in test. CSS will not be processed by postCSs-loader after the @import syntax is introduced in index.css.

Therefore, the problem here is that the contents of the above test.css file will not be processed by postCSS-loader. But we want the contents of test. CSS to be returned to postCSs-loader when we import test. CSS in index. CSS. Because in real development, we want all CSS files to be processed by postCSS-loader.

So what do we do? We can modify the ‘CSS-loader’ in the use array (see official documentation) as follows:

{
  loader: 'css-loader'.options: {
      importLoaders: 1 // The value depends on the previous number of loaders}}Copy the code

ImportLoaders in the above code block corresponds to a value, which defaults to 0, indicating that resources imported by @import do not need to be processed by any loader before CSS-Loader. If the value is 1, the resources imported by @import will be processed by the previous loader (postCSS-loader in this case) before being processed by csS-Loader. If the value is 2, the resources imported by @import are processed by the two loaders before csS-Loader (less-loader and postCSS-loader in this case), and so on.

After the configuration is modified according to the preceding figure, the CSS resources loaded through @import can be processed by the loader. Otherwise, the expected effect cannot be achieved.

NPM run build: NPM run build: NPM run build

As you can see, the related styles have been successfully transformed.

The importLoaders attribute in css-loader is used to importLoaders.