参考链接

  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. 上传视频到七牛云Django后端实现

    1.上传视频到七牛云django端实现 1.1 获取七牛云秘钥 https://portal.qiniu.com/user/key 1.2 在syl/settings.py中配置七牛云上传 参考官方 ...

  2. websocket简单实现五子棋即时对战功能

    几年前做的一个小demo,代码比较老,先上下html显示效果图 因为代码中注释比较详细,所以就直接上代码了 html代码,也就是上图展示的效果页面 <!DOCTYPE html> < ...

  3. `prometheus-net.DotNetRuntime` 获取 CLR 运行指标原理解析

    prometheus-net.DotNetRuntime 介绍 Intro 前面集成 Prometheus 的文章中简单提到过,prometheus-net.DotNetRuntime 可以获取到一些 ...

  4. 使用Jmeter测试快速入门

    一 创建线程组 1.1.2.   线程组主要包含三个参数:线程数.准备时长(Ramp-Up Period(in seconds)).循环次数. 1.1.3.    线程数:虚拟用户数.一个虚拟用户占用 ...

  5. 并发编程实战-J.U.C核心包

    J.U.C - AQS java.util.concurrent(J.U.C)大大提高了并发性能,AQS 被认为是 J.U.C 的核心.它核心是利用volatile和一个维护队列. AQS其实就是ja ...

  6. 从内存泄露、内存溢出和堆外内存,JVM优化参数配置参数

    内存泄漏 内存泄漏是指程序在申请内存后,无法释放已申请的内存空间,无用对象(不再使用的对象)持续占有内存或无用对象的内存得不到及时释放,从而造成内存空间的浪费.内存泄漏最终会导致OOM. 造成内存泄漏 ...

  7. 老猿学5G:多量纲计费与QoS的QCI、5QI、ARP、GBR和MBR

    ☞ ░ 前往老猿Python博文目录 ░ 一.多量纲计费 多量纲计费是与传统的计费模式相区别的一种计费模式,传统的计费基本上都是通过使用量.使用时长或包固定时长等方式计费,而多量纲计费是指在考虑以上方 ...

  8. PyQt(Python+Qt)学习随笔:QListView的spacing属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的spacing属性用于控制视图布局中数据项周围填充的空白空间的大小.缺省值为0, ...

  9. 混合云存储打开的正确姿势——腾讯云存储网关 CSG

    近年来,随着云计算的发展,越来越多的企业选择将IT系统基础设施转移到云上,上云有助于推动企业加快信息化.数字化.智能化的转型,但是很多企业对传统的业务系统依赖程度较高,短时间内将业务迁移上云将会面临很 ...

  10. 沪苏浙皖共同打造区块链数字经济发展高地,Panda Global表示区块链真的来了!

    近日,在长三角一体化发展重大合作事项签约仪式上,沪苏浙皖经信部门共同签约,推进长三角区块链数字经济一体化发展,共同打造数字经济发展高地.从此次签约活动也能看出来,区块链数字现金的发展已经得到了认可,早 ...