参考链接

  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. MySQL ERROR 1040: Too many connections

    如题,本章主要讲下当服务器出现 ERROR 1040: Too many connections错误时的一些处理心得. max_connections查看 ## 查看最大连接数 SHOW VARIAB ...

  2. 4、Spring Cloud Eureka

    1.Eureka简介 (1).CAP简介 CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition toleran ...

  3. moviepy音视频剪辑:headblur函数遇到的ValueError assignment destination is read-only问题及解决办法

    ☞ ░ 前往老猿Python博文目录 ░ 一.运行环境 运行环境如下: python版本:3.7 opencv-python版本:4.2.0.34 numpy版本:1.19.0 二.错误案例代码及报错 ...

  4. Centos 7 下的java安装

    安装java 下载jdk的安装包,放到 /usr/local 目录下 创建一个 java 的目录存放 jdk 1 mkdir java 解压java安装包 1 tar -zxvf "jdk名 ...

  5. Samba服务器搭建,匿名访问,用户密码访问

    环境 #服务端:centos7 客户端:centos7,windows10 配置yum源,使用光盘镜像安装Samba服务 #挂载光盘:mount  /dev/sr0  /mnt/cdrom #安装sa ...

  6. JAVA获取指定的类型的本机MAC地址

    前面我们运维小伙在部署的时候,发现在真实服务器获取不到mac地址或者获取不到指定类型的mac地址,写程序记录如下 import com.google.common.base.Strings; impo ...

  7. JApiDocs(自动生成接口文档神器)

    JApiDocs教程 前言 作为一名优秀的程序员来说,由于涉及到要与前端进行对接,所以避免不了的就是写接口文档.写完接口文档,一旦代码返回结果,参数等出现变动,接口文档还得随之改动,十分麻烦,违背了我 ...

  8. STL——容器(deque) 构造 & 头尾添加删除元素

    1.deque容器概念 deque是"double-ended queue"的缩写,和vector一样都是STL的容器,唯一不同的是:deque是双端数组,而vector是单端的. ...

  9. 女朋友突然问我DNS是个啥....

    女朋友突然问我DNS是个啥.... 今天晚上我正在床上躺着刷手机,然后我女朋友突然说她的电脑坏了.说连着WIFi上不了网,让我给她看一下.(这就是有个程序员男朋友的好处) 然后我拿到电脑看了一下发现访 ...

  10. 恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧

    大家好,我是你们的 前端章鱼猫,一个不喜欢喵.又不喜欢吃鱼的超级猫 ~ 今天给大家带来的是 在 GitHub 上如何精准搜索的神仙技巧. [前端GitHub:https://github.com/bi ...