使用 Less 替换 wxss 开发微信小程序

微信小程序开发中默认使用的 wxss 做为样式文件,这货对应成前端就是 CSS 文件,所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器(参考:wxapp.vim——使用Vim开发小程序利器),于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。

思路

启用一个 gulp 任务,在文件更新的时候自动将 .less 文件编译成 .wxss 文件。

主要用到了 2 个 gulp 插件,gulp-lessgulp-rename。前者用来编译 Less 文件,后者用来将编译出来的 css 文件重命名为 .wxss

实现

代码:

var lessPath = ['./app/**/**/*.less', './app/**/*.less'];

/**
* 本地监视less的文件
*/
gulp.task('less', function () {
  return gulp.src(lessPath)
    .pipe($.plumber())
    .pipe($.less())
    .pipe($.rename(function (path) {
      path.extname = '.wxss';
    }))
    .pipe(gulp.dest('./app'));
});

// 静态服务器
gulp.task('style', function () {
  gulp.watch(lessPath, ['less']);
});

使用

开发前运行 gulp style,剩下的事情就是写 Less 了,再不也用管什么 wxss 了。

 标签: CSS, 前端开发, 小程序

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章