平常使用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文件 这篇帖子整理的,有什么不对的,轻喷