返回

如何在webpack中使用less

Created By ZOU on Sep 26 2019

在使用webpack中经常会配置到less,那么如何配置less。

首先我们需要安装对应的依赖:

cnpm i -D less less-loader css-loader style-loader
  • less:用于处理less语法
  • less-loader:webpack的loader,用于将less代码处理成css
  • style-loader:webpack的loader,用于将css注入到dom中
  • css-loader:webpack的loader,用于处理css内的@import和url()

webpack的配置使用:

module.exports = {
// ...other config
module: {
rules: [{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}]
}
}

注意使用loader的顺序,是从后往前执行的,依次是less-loader(处理less,将less语法处理成css并返回)->css-loader(处理css代码,解析css代码内的@import以及url())->style-loader(将处理完的代码插入至dom中)

这样就完成了。

标签: webpack less