评论

微信开发工具直接编译scss文件

以前微信开发工具不支持打卡scss文件,每次一个小改动,都要切换其他编辑器编译,感觉比较麻烦.最近 RC Build (1.02.2001191) 的开发工具支持打开scss文件,就可以编译

前言


以前微信开发工具不支持打卡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文件变动,保存后会自动编译.

最后一次编辑于  2020-02-24  
点赞 0
收藏
评论

2 个评论

  • 🍩
    🍩
    2020-12-30

    我暂时也是用的这个方法, 但是我看社区李有个老哥说能直接用vscode里的easy-scss , 但是他没说明白. 想知道怎么用的

    2020-12-30
    赞同
    回复 1
    • 🍩
      🍩
      2020-12-30
      我感觉我对vscode 有重度依赖, 现在看小说用vscode , 网易云用vscode , 打小游戏页用vscode ,- - .
      2020-12-30
      回复
  • 自律乐观派
    自律乐观派
    2020-03-13

    你好能加你联系方式聊聊吗

    2020-03-13
    赞同
    回复
登录 后发表内容