小程序使用sass编译wxss

参考来源

开发环境：

• mac
• 微信开发者工具
• 默认你已经创建了小程序工程

一、开发前准备（按下面步骤一步一步执行）

• 首先全局安装gulp，打开终端，输入以下命令

  
  image.png

命令如下：
npm install --global gulp

• 安装相关插件，可用下面2种方式，根据自己喜好选择
  1.在终端上，cd到小程序工程目录下

  
  image.png
  

  2.微信开发者工具打开小程序，微信开发者工具底部终端

  
  image.png

命令如下：
npm install gulp-changed gulp-rename gulp-sass gulp-watch

二、以上步骤完成后，在项目根目录(app.js同级)创建gulpfile.js文件

image.png
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')
   }))
}

三、测试效果

在微信开发者工具终端启动命令：

image.png

命令如下：
gulp

创建logins.scss文件，logins.wxss文件可不用创建
如下，编辑scss文件：

image.png

保存后，可看到logins.wxss文件的产出。

注意：

如果scss语法出错按保存了,监听就停止了,重新输入gulp就可以了