2021最新webpack5: less-loader

P7 07-less-loader

先看目录结构

.
├── dist
│   └── bundle.js
├── index.html
├── package.json
├── src
│   ├── main.css
│   ├── main.js
│   └── utils.js
└── webpack.config.js

先看依赖

# 识别 .less 文件
npm i -D less-loader
# 将 less 文件转成 .css
npm i -D less

wepback设置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,  // 正则，匹配将要处理的文件(filename)类型
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,  // 正则，匹配将要处理的文件(filename)类型
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}