微信小程序使用sass编译wxss

平常使用sass习惯了,想在微信小程序中也使用sass来加快开发效率,在网上找了使用gulp来编译wxss的方法,给自己记个笔记,也供其他小伙伴参考. 以下是一个demo测试

• 首先全局安装gulp,方便后面直接执行gulp命令
  npm install --global gulp

• 新建一个微信小程序demo项目,打开cmd进入你的项目文件夹

• 先在项目中创建一个package.json文件
  npm init --y

• 安装gulp和相关插件
  npm install gulp
  gulp下载完成后安装依赖npm install gulp-changed gulp-rename gulp-sass gulp-watch

• 都安装完以后在你的项目根目录创建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')
    }))
}

上面都搞定以后,就可以测试一下效果

• 新建一个index.scss文件并随便写点scss的样式
  
• 刚刚那个cmd不用关 直接运行 gulp
  
  出现这个状态就说明开启了gulp的监听,当你保存pages里任何scss文件时,gulp帮你编译成wxss文件
  
  编译后的wxss文件
  
  注意：如果你scss语法出错按保存了,监听就停止了,重新输入gulp就可以了.
  本人是根据 微信开发工具直接编译scss文件 这篇帖子整理的,有什么不对的,轻喷