[webpack] Do you really know how csS-Loader works?

Webpack is a very popular module loader and packaging tool, it can use and process various resources, such as JS(including JSX), coffee, style (including less/ Sass), images, etc., as modules. Loader is a very important concept in the use of Webpack. We can process different files through loader, and csS-Loader is used to process CSS. Css-loader may be used by many people, but what functions it provides and how to use it may not be very clear. This article will be on the CSS -loader functions to do a comb, I hope to help you when using.

use

As with other loaders, we need to set csS-loader now in webpack.config.js (style-loader is a tool for inserting compiled CSS into HTML) :

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      ...
]
Copy the code

Then add your CSS to the js module, for example:

var css = require("./app.css");
Copy the code

Once packaged, your app.css is compiled and inserted into HTML.

The CSS-loader has the following parameters:

Here’s an example of how to use these parameters.

root

Absolute paths are not processed by csS-loader by default:

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

If the root parameter is set, the root parameter value is appended to the “/” and then processed by CSS-loader:

webpack.config.js:

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?root=./img" },
      ...
]
Copy the code

It will then compile to:

url(/image.png) => url(./img/image.png)

modules

A CSS MODULE is a CSS in javascript approach. When we import a CSS file into a JS MODULE, the CSS file exposes an object that maps all local and global CSS class names, such as:

import styles from "./style.css";

element.innerHTML = ' + styles.className + '">';
Copy the code

You can enable this mode by setting modules when using CSS-loader.

For example:

.app{
  text-align: center;
}
Copy the code

If the modules parameter is set

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?modules" },
      ...
]
Copy the code

Will compile to:

._2jCL78eMjlZHws9ajHxlDX{
  text-align: center;
}
Copy the code

It exposes the following objects in js:

{app: "_2jCL78eMjlZHws9ajHxlDX"}
Copy the code

localIdentName

The modules parameter usually sets the CSS class name in conjunction with localIdentName. In the previous section, we saw that CSS with no localIdentName will compile to a random string, which is not very readable, so we need to handle its class name, which is localIdentName.

For example, there is a file called app.css:

.title{
  font-size: 16px;
}
.desc{
  text-align: center;
}
Copy the code

If the modules and localIdentName parameters are set

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]" },
      ...
]
Copy the code

The compiled result is:

.app---title---103E5{
  font-size: 16px;
}
.app---desc---1LgG2{
  text-align: center;
}
Copy the code

Note: In the CSS MODULE, you can determine whether a class is a global CSS class by setting its name to :local or :global. Classes with :local are compiled, while classes with :global are treated as global and will not be compiled. If we set CSS to:

:local(.title){
  font-size: 16px;
}
:global(.desc){
  text-align: center;
}
Copy the code

Compiled to:

.app---title---103E5{
  font-size: 16px;
}
.desc{
  text-align: center;
}
Copy the code

minimize

Css-loader integrates the compression tool CSSNano. After the minimum parameter of CSS is set above, CSS will be compressed and optimized.

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?minimize" },
      ...
]
Copy the code

The compiled:

.title{font-size:16px}.desc{text-align:center}
Copy the code

camelCase

The camelCase argument adds a new copy of the camelCase name to the class name. This argument also needs to be used with the modules argument, such as the following CSS:

.my-title{
  font-size: 16px;
}
Copy the code

Set the webpack. Config. Js

loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?modules&camelCase" },
      ...
]
Copy the code

Added a copy of the hump name to the object exposed after compilation:

{
  my-title:"_3I8_gyz8vp7gOxXNP7ljNv",
  myTitle:"_3I8_gyz8vp7gOxXNP7ljNv"
}
Copy the code

At this point, you can reference the variable in JS with a hump, require(‘app.css’).mytitle.

-XXX

By setting the -xxx parameter, csS-loader will not process certain CSS functions. Such as:

css-loader? -url // Do not handle url(...) css-loader? -import // Does not process @importCopy the code

Please go to Github to see all the above cases: github.com/zyf394/css-…