A. less文件編譯css,css文件為什麼是空的呢
有些軟體有插件可以實時編譯,比如sublime。
我用的是gulp,方便前端自動化。你可以網上搜一下,用起來啊很方便。
舉個例子:
java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./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(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','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']);
});
B. visual studio怎麼編譯less
工具》擴展》選擇聯機搜索less編譯插件,我是已經安裝了所以搜索略過了,安裝後重啟就行,打開編寫less後生成一下