小程序记录

小程序使用sass

小程序根目录初始化

npm init

安装 gulp、gulp-sass、gulp-rename（使用Less则安装gulp-less）

npm i gulp gulp-sass gulp-rename -D

在小程序根目录下创建 glupfile.js

const gulp = require('gulp');
const rename = require('gulp-rename'); // 重命名插件
const sass = require('gulp-sass');
 
function handleSass() {
  return gulp.src('miniprogram/**/*.scss')            // 读取miniprogram目录下的所有 .scss 文件
    .pipe(sass().on('error', sass.logError)) // 使用 gulp-sass 插件转化
    .pipe(rename({ extname: '.wxss' }))      // 将拓展名修改为 .wxss
    .pipe(gulp.dest('miniprogram'))                   // 导出到 miniprogram 文件夹下
}
 
// watch 文件监听
// ignoreInitial: false，执行 gulp 命令之后立即更新文件
function watch() {
  gulp.watch('miniprogram/**/*.scss', { ignoreInitial: false }, handleSass)
}
 
exports.default = watch

运行glup命令

在小程序根目录中运行命令 若未安装全局glup则使用npx glup,若全局安装了glup则可直接使用gulp命令　　

执行完命令后，可在对应的小程序模块下新建 index.scss文件，保存后自动编译成index.wxss