在小程序上愉快的使用sass、scss

使用gulp 在小程序上愉快的使用sass、scss

问题引入

wxss里面写的大部分和css的一样，写样式代码的效率极低，维护效率也很低
于是考虑用sass进行编写，尴尬啊，小程序不支持sass语法，后来想到用gulp流来处理scss文件转换成wxss
目前用gulp4解决这个问题

依赖包

npm install gulp gulp-sass sass gulp-rename --save-dev

源码

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const rename = require("gulp-rename");

gulp.task("sass", () => {
    return gulp
        .src("./weapp/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(
            rename({
                extname: ".wxss",
            })
        )
        .pipe(gulp.dest(function(file){return file.base;}));
});

gulp.task("watchs", () => {
    gulp.watch("./weapp/**/*.scss", gulp.parallel("sass"));
});

说明

创建小程序项目后在根目录gulpfile.js根目录创建一个weapp文件夹，把小程序的项目文件丢进去，执行gulp watchs在对应的页面目录下创建.scss文件进行样式代码编写，就会在同于目录下自动生成.wxss文件。

可优化空间

1. 初始化启动的监听的时候清空所有的.wxss文件
2. 添加全局sass变量管理