前言
以前微信开发工具不支持打卡scss文件,每次一个小改动,都要切换其他编辑器编译,感觉比较麻烦.最近 RC Build (1.02.2001191) 的开发工具支持打开scss文件,这算是一个福音,然而如何编译成wxss却没有说明,所以自己利用gulp在开发工具中直接编译,很方便.
使用
1、在项目与app.js同级目录中新建文件gulpfile.js
加入内容如下:
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename')
var changed = require('gulp-changed')
var watcher = require('gulp-watch')
//自动监听
gulp.task('default', gulp.series(function() {
watcher('./pages/**/*.scss', function(){
miniSass();
});
}));
//手动编译
gulp.task('sass', function(){
miniSass();
});
function miniSass(){
return gulp.src('./pages/**/*.scss')//需要编译的文件
.pipe(sass({
outputStyle: 'expanded'//展开输出方式 expanded
}))
.pipe(rename((path)=> {
path.extname = '.wxss'
}))
.pipe(changed('./pages'))//只编译改动的文件
.pipe(gulp.dest('./pages'))//编译
.pipe(rename((path)=> {
console.log('编译完成文件:' + 'pages\\' + path.dirname + '\\' + path.basename + '.scss')
}))
}
复制代码
2、打开命令行,进入gulpfile.js所在目录,执行如下命令
npm install
gulp-sass
gulp-rename
gulp-changed
3、执行监听命令
gulp
会监听pages目录所有的scss文件变动,保存后会自动编译.
我暂时也是用的这个方法, 但是我看社区李有个老哥说能直接用vscode里的easy-scss , 但是他没说明白. 想知道怎么用的
你好能加你联系方式聊聊吗