使用 gulp 编译 LESS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 gulp 编译 LESS相关的知识,希望对你有一定的参考价值。
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护。
安装
npm install gulp-less
基本用法
// 获取 gulp var gulp = require(‘gulp‘) // 获取 gulp-less 模块 var less = require(‘gulp-less‘) // 编译less // 在命令行输入 gulp less 启动此任务 gulp.task(‘less‘, function () { // 1. 找到 less 文件 gulp.src(‘less/**.less‘) // 2. 编译为css .pipe(less()) // 3. 另存文件 .pipe(gulp.dest(‘dist/css‘)) }); // 在命令行使用 gulp auto 启动此任务 gulp.task(‘auto‘, function () { // 监听文件修改,当文件被修改则执行 less 任务 gulp.watch(‘less/**.less‘, [‘less‘]) }) // 使用 gulp.task(‘default‘) 定义默认任务 // 在命令行使用 gulp 启动 less 任务和 auto 任务 gulp.task(‘default‘, [‘less‘, ‘auto‘])
LESS 代码和编译后的CSS代码
less/a.less
.less{
a{
color:pink;
}
}
less/import.less
@import "a.less";
.import{
a{
color:red;
}
}
less/a.css
.less a {
color: pink;
}
less/import.css
.less a {
color: pink;
}
.import a{
color: red;
}
以上是关于使用 gulp 编译 LESS的主要内容,如果未能解决你的问题,请参考以下文章