loader-configuration processing css, less, scss file processing

Use webpack to package css files

import './css/index.css'

If you run it directly, an error will be reported and you need to configure the loader.

1. runcnpm i style-loader css-loader --save-dev
2. Modify webpack.config.jsthis configuration file:

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
            //处理css文件的规则
        ]
    }

3. Note: useIndicates which modules are used to process the testmatched files; usethe calling order of the relevant loader modules is from back to front, flashlight first

Use webpack to package less files

1. runcnpm i less-loader less -D
2. Modify webpack.config.jsthis configuration file:

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

Use webpack to package sass files

1. runcnpm i sass-loader node-sass --save-dev
2. webpack.config.jsAdd the loader module that processes sass files in :

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

final code

  module: {
    
     // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      {
    
     test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
      //  配置处理 .css 文件的第三方loader 规则
      {
    
     test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 
      //配置处理 .less 文件的第三方 loader 规则
      {
    
     test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
      // 配置处理 .scss 文件的 第三方 loader 规则
    ]
  }
}

Summary
Note: webpack, by default, can only package and process JS type files, and cannot process other non-JS type files;
if we want to process non-S type files, we need to manually install some suitable third-party 1oader loaders;

1. If you want to package and process css files, you need to install cnpm i style-loader css-loader-D, and the same goes for other files.

2. Open the configuration file webpack.config.js, and add a configuration node in it, called module, which is an object; on this module object, there is a rules attribute, and this rules attribute is an array; in this array, Stores the matching and processing rules for all third-party files;

Note: webpack's process for handling third-party file types:

1. Discover that the file to be processed is not a J5 file, and then go to the set file to find out whether there is a corresponding third-party 1oader rule.

2. If the corresponding rule can be found, the corresponding loader will be called to process this file type;

3. When calling the loader, it is called from back to front;

4. When the last loader is called, the processing results will be directly handed over to webpack for packaging and merging, and finally output to bundle.je