微信小程序使用sass编译wxss

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

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

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

先在项目中创建一个package.json文件 npm install --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文件 这篇帖子整理的,有什么不对的,轻喷