如果项⽬中除了 .css ⽂件之外，还有 .less ⽂件。我们还需要对 .less ⽂件进⾏打包。这⾥ 的打包顺序是：先将 .less ⽂件转成 .css ⽂件，然后，在打包 .css ⽂件。 打包 .less ⽂件我们需要安装 less 和 less-loader npm i less less-loader -D

less 打包逻辑

转换 LESS - 图1

声明 less ⽂件

@body-bg: #dfb; @body-color: blue; body { margin: 0 auto; padding: 20px; background: @body-bg; color:@body-color; } p { padding: 20px; background: rgb(248, 200, 173); } .code { user-select: none; }

引⼊ less ⽂件

require(‘./header’) import data from ‘./data.json’ import ‘./css/main.css’ // 引⼊ CSS import ‘./css/main.less’ // 引⼊ less console.log(‘Hello Webpack’, data)

然后在 webpack.config.js 中添加对应的 less 配置

const path = require(‘path’) module.exports = { mode: ‘none’, entry: ‘./src/index.js’, output: { filename: ‘bundle.js’, path: path.join(__dirname, ‘dist’) }, module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] }, { test: /.less$/, use: [ ‘style-loader’, ‘css-loader’, ‘less-loader’ ] } ] } } ⾸先，我们在 rules 数组中，在添加 .less ⽂件的规则匹配。然后，我们需要的执⾏顺序是 less-loader > css-loader > style-loader 所以，less-loader 放在 use 数组的最后。