1.安装less
npm install less -D
2.创建less文件
.box{
width: 100px;
height: 100px;
background: red;
}
3.引入less文件并打包
执行npx webpack
报错无法识别less文件
4.安装less-loader并配置
npm install less-loader@9 -D
这里指定一下版本不然会因为node版本过低报错
配置:
const path = require('path');//nodejs用来处理路径问题的模块
module.exports = {
/**入口 */
entry: './src/main.js',
/**输出 相对路径*/
output: {
/**文件输出路径 绝对路径*/
//__dirname 表示当前文件的文件夹目录
path: path.resolve(__dirname, 'dist'),
/**文件名 */
filename: 'dist.js'
},
/**加载器 */
module: {
rules: [
//loader的配置
{
/**test 代表要检测的文件 */
test: /\.css$/, //只检测.css文件
use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
},
{
test: /\.less$/,//只检测.less文件
//loader:'xxx',loader只能使用一个loader,use可以使用多个loader
use: ['style-loader', 'css-loader', 'less-loader'],//对检测到文件使用哪些loader
}
]
},
/**插件 */
plugins: [
//plugin配置
],
/**模式 */
mode: 'development'
}
注意要最先使用less-loader进行处理,
loader只能使用一个loader,use可以使用多个loader
less-loader 可以将less文件编译成css文件
执行npx webpa打包
查看html文件