有些软件有插件可以实时编译，比如sublime。
我用的是gulp，方便前端自动化。你可以网上搜一下，用起来啊很方便。
举个例子：
var gulp = require('gulp')var less = require('gulp-less')
var notify = require('gulp-notify')
var plumber = require('gulp-plumber')
var concat = require('gulp-concat')
var minifycss = require('gulp-minify-css')
var rename = require('gulp-rename')
var watch = require('gulp-watch')
var uglify = require('gulp-uglify')
var autoprefixer = require('gulp-autoprefixer')
var lessPath = './src/less/*.less'
var lessMainPath = './src/less/main.less'
var lessDist = './src/css/'
var cssPath = './src/css/*.css'
var jsSrcPath = './src/js/*.js'
var distPath = './dist/'
//编译less
gulp.task('lessCompile', function() {
gulp.src([lessMainPath])
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(less())
.pipe(gulp.dest(lessDist))
})
//监控less文件变化
gulp.task('watchLess', function() {
gulp.watch(lessPath, ['lessCompile'])
})
//css合并压缩加前缀
gulp.task('handleCss', function() {
return gulp.src(cssPath)
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers: ['last 5 versions', 'Android >= 4.0'],
cascade: true,
remove: false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath))
})
//监控css文件变化
gulp.task('watchCss', function() {
gulp.watch(cssPath, ['handleCss'])
})
两种方式，分别为：1、手动生成；2、使用webstorm自动生成。 1、项目的文件结构 2、在less文件的根目录 Shift + 鼠标右键 + 选择‘在此处打开命令窗口’ 3、输入命令：lessc + 空格 + less文件名 如：lessc main.less 4、继续输入命令：lessc + 空格 + less文件名 + 空格 + 大于号 + 空格 + css文件名 如：lessc main.less >main.css1、File + Settings 2、Tools + File Watchers 3、点击‘确定’即可 4、当你修改less文件时，css文件将自动生成。因为感觉用 微信开发者工具 开发很不习惯，所以都是用 WebStorm 来开发，再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less
配置方案
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
和微信步骤一样，只是后缀不同
路径 File | Settings | Tools | File Watchers | +
点加号，选择less, 弹出下面的窗口，已经有默认配置了，点ok即可
