This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

In development, we might use less, SASS, Stylus and other preprocessors to write CSS styles for efficiency. So how can our environment support these preprocessors?

First of all, we need to make sure that CSS written by less and Sass need to be converted into ordinary CSS through tools. Let’s say we create a component.less less file under the./ SRC/CSS path of the project and write some less code inside:

@fontSize: 50px;
@fontWeight: 700;

.content {
  font-size: @fontSize;
  font-weight: @fontWeight;
}
Copy the code

After writing, ask yourself if the current component.less file will be loaded by Webpack. Of course not, because this file is not in the dependency diagram. To make it loadable, we can go to component.js and add a line to the header to import the component.less file: import ‘.. /css/component.less’; As shown in figure:

This introduction means that the less file will also be compiled and loaded when compiled and packaged using WebPack.

Run the NPM run build command to see if the current less file can be parsed properly.

It can be seen that an error message is displayed after the csS-Loader is installed. The error message is similar to the one displayed after the csS-Loader is installed. So what do we do?

First, the browser doesn’t know less code, so less code must eventually be converted to CSS code for the browser to recognize. So how does less code translate to CSS code? You might say, use less-loader, but in fact, less-loader just does the processing. What actually compiles less code is a separate tool (unrelated to Webpack) — less, in other words, What really turns LESS code into CSS code is the LESS tool.

The less tool is not yet available in the current project, so we will install it first (only we need to convert less code to CSS code during development, so we will use -d here) :

npm install less -D
Copy the code

Once installed, the lessc file can also be found in the.bin directory of the node_modules folder of your project (if not, refresh the directory first), which will help you compile and convert less files into CSS files.

To compile less files into CSS files, run the following command:

npx less ./src/css/component.less > component.css
Copy the code

Use less to convert the component.less file from the CSS directory in the SRC directory in the current path to the component. CSS file in the current directory.

After the preceding command is executed successfully, the effect is as follows:

As you can see, there is a component. CSS file in the current directory (in this case, the root directory of the current project). The content is also normal CSS code, and the variables in the component.less file have been replaced with values. You can convert less files into CSS files by using shell commands.

However, there must be a large number of less files in development, and it would be impractical to run shell commands one by one

Therefore, we also need to install less-loader in the project, which will be based on the less tool (this means we need to install less first, if we haven’t installed less before, Install less and less-loader at the same time to convert less files into CSS files.

Install less-loader:

npm install less-loader -D
Copy the code

Once installed, we need to go to the webPack configuration file (in this case, wk.config.js) and set the processing rules for the less file:

module: {
  rules: [
    /* Handle CSS files */
    // ...
    /* Handle less files */
    {
      test: /.less$/,
      use: [
        'style-loader'.'css-loader'.'less-loader']]}}Copy the code

Less-loader is used to process less files, and less-loader uses less. However, we do not need to configure less in the configuration file, because less-loader automatically loads the less package and uses it. So, you only need to write less-loader. After the less file is loaded, it becomes a CSS file, and then the CSS file needs to be further processed, so we need CSS-loader, then in order to enable the CSS code to insert into the page, we need style-loader. Therefore, we need to execute less-loader, CSS-loader, and style-loader in sequence.

After the configuration is complete, run the NPM run build command. The result is as follows:

As you can see, there is no error message. When you go to the browser page, you can also see that the font has been enlarged and bolded:

The preceding is the process of less-loader processing less files. After matching. Less files, process them in the sequence of less-loader, CSS-loader, and style-loader (that is, from bottom to top or from right to left).