参考链接

  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. Java中的Set对象去重

    前言部分 Set<T> 去重相信大家一定不陌生,尤其是在 Set<String>.Set<Integer> 等等,但是在使用 Set<实体> ,在不重写 ...

  2. IDEA无法识别src目录

    如图 如此 即可 -------------------------------------------------------------------- 另一种办法是:让IDEA识别出module, ...

  3. 转:HTTP协议简介与在python中的使用详解

    1. 使用谷歌/火狐浏览器分析 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来.而浏览器和服务器之间的传输协议是HTTP,所以: HTML是一种用 ...

  4. PyQt(Python+Qt)学习随笔:QTabWidget选项卡部件操作控制类属性movable和tabsClosable介绍

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTabWidget的操作控制类属性包括movable.tabsClosable这两个. 1. mo ...

  5. Python(Python+Qt)学习随笔:使用xlwings新建Execl文件和sheet的方法

    在<Python学习随笔:使用xlwings读取和操作Execl文件>介绍了使用xlwings读取和操作Execl文件的方法,但老猿这两天写个例子使用时,发现使用该文的方法无法新建EXCE ...

  6. 函数与函数式编程(生成器 && 列表解析 && map函数 && filter函数)-(四)

    在学习python的过程中,无意中看到了函数式编程.在了解的过程中,明白了函数与函数式的区别,函数式编程的几种方式. 函数定义:函数是逻辑结构化和过程化的一种编程方法. 过程定义:过程就是简单特殊没有 ...

  7. 安装centos出现的问题

    1.配置好之后,点击完成,如果出现"无法创建新虚拟机,无法打开配置文件,D:/... ,拒绝访问" 的错误时: 关闭虚拟机,重新以管理员身份打开.

  8. Newbe.ObjectVisitor 0.4.4 发布,模型验证器上线

    Newbe.Claptrap 0.4.4 发布,模型验证器上线. 更新内容 完全基于表达式树的模型验证器 本版本,我们带来了基于表达式树实现的模型验证器.并实现了很多内置的验证方法. 我们罗列了与 F ...

  9. ajax的五种状态

    ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接 ...

  10. 题解-CF1140E Palindrome-less Arrays

    CF1140E Palindrome-less Arrays \(n\) 和 \(k\) 和 \(n\) 个数的序列 \(a\).把 \(a\) 中的 \(-1\) 替换成 \([1,k]\) 之间的 ...