参考链接

  1. 全局安装gulp,方便以后直接执行gulp命令

    npm install gulp -g

  2. 用原生小程序新建一个项目

  3. 在小程序根目录(app.js同级目录)中新建package.json文件

    npm init -y

  4. 安装gulp和相关插件

    npm install gulp -s

    安装依赖

    npm install gulp-changed gulp-rename gulp-sass gulp-watch

  5. 在根目录创建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')
    }))
    }
  6. 在根目录运行gulp进行监听编译

    gulp

  7. 这个时候在page目录下修改保存scss文件就会实时转换为wxss文件啦!

原生小程序中实现将scss文件实时编译为wxss文件的更多相关文章

  1. WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...

  2. 在微信小程序中使用 echarts 图片-例 折线图

    首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...

  3. 如何把原生小程序项目合并的mpvue项目中

    当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...

  4. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  5. 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号 https://blog.csdn.net/hotqin888/article/details/84111389 小程序中打开网页和pdf h ...

  6. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  7. 在小程序中实现 Mixins 方案

    摘要: 小程序开发技巧 作者:jrainlau 原文:在小程序中实现 Mixins 方案 Fundebug经授权转载,版权归原作者所有. 在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的 ...

  8. 高大上的微信小程序中渲染html内容—技术分享

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...

  9. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

随机推荐

  1. Spring Cloud 学习 (七) Spring Cloud Sleuth

    微服务架构是一个分布式架构,微服务系统按业务划分服务单元,一个微服务系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性较高,如果出现了错误和异常,很难去定位.主要体现在一个请求可能需要调用很 ...

  2. Jmeter(三十一) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy4(详解教程)

    1.简介 上一篇文章中宏哥给小伙伴或童鞋们介绍讲解了手动添加Variable list的值,而实际工作中Badboy为我们提供了Variable setter工具,让我们不再使用哪一种比较笨拙的方法了 ...

  3. 关于open函数文件打开模式的有意思的一个现象

    老猿前阵子学习了文件IO,最近正在回顾及进行各种验证和总结,老猿在对文件进行打开后的返回值检查属性时,发现文件打开返回的文件对象的读写模式与打开文件的模式并不完全相同,如下案例: fp1 = open ...

  4. PyQt(Python+Qt)学习随笔:Qt Designer中QAbstractButton派生按钮部件的icon属性和iconSize属性

    icon属性 icon属性保存按钮上展示的图标,图标的缺省大小由图形界面的样式决定,但可以通过 iconSize 属性进行调整. 图标的几种子属性状态的含义与QWidget的windowIcon属性相 ...

  5. OutputFormat---自定义输出方式

    简介 可以自定义输出的格式和文件,例如包含某字段的输出到一个指定文件,不包含某字段的输出到另一个文件. 案例 数据 www.nevesettle.com www.baidu.com www.qq.co ...

  6. LoadRunner 多用户并发 登录,上传数据,登出的脚本教程

    这里记录 Web/Http  模式,模拟多用户并发进行  : 登录,上传数据,退出登录一整套流程.并发的用户量多少,可自定义.这里不介绍录屏的方式,是自己写脚本去执行的. 1.安装loadRunner ...

  7. edusrc电子科技大学证书

  8. ActionResult的返回类型

    ActionResult是控制器方法执行后返回的结果类型,控制器方法可以返回一个直接或间接从ActionResult抽象类继承的类型,如果返回的是非ActionResult类型,控制器将会将结果转换为 ...

  9. C++详解(8-9)

    八. C++函数的高级特性 对比于C语言的函数,C++增加了重载(overloaded).内联(inline).const和virtual四种新机制.其中重载和内联机制既可用于全局函数也可用于类的成员 ...

  10. 从HBase底层原理解析HBASE列族不能设计太多的原因?

    在之前的文章<深入探讨HBASE>中,笔者详细介绍了: HBase基础知识(包括简介.表结构).系统架构.数据存储 WAL log和HBase中LSM树的应用 HBase寻址机制 mino ...