详解如何在微信小程序中愉快地使用sass


Posted in Javascript onJuly 30, 2018

前言

在微信小程序中,css是用wxss来表示,但写法基本一致。需要注意的是wxss扩展了两个特性,分别是:

  • 尺寸单位
  • 样式导入

具体可参考wxss,此处不做过多赘述。

为了方便打包sass,我们使用gulp来处理我们的scss文件,将其转换为wxss。

目录结构

在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码。而本次讲解用到的目录结构如下:

详解如何在微信小程序中愉快地使用sass

  • build目录用来配置我们的打包参数,目前里面只有一个config.js文件
  • dist目录为打包输出的目录,也是小程序运行的目录
  • gulpfile.js配置打包的任务
  • src就是我们的源代码目录

src的目录结构如下:

详解如何在微信小程序中愉快地使用sass

安装依赖

yarn add gulp gulp-sass gulp-rename gulp-replace gulp-tap gulp-clean -D

gulp和gulp-sass为打包sass必须,gulp-rename则负责把scss后缀改为wxss,gulp-replace负责内容的替换(这个后面会讲到),gulp-tap用来处理当前执行的文件,gulp-clean负责清除我们不需要的文件。

sass打包配置

gulp配置打包sass非常简单,代码如下:

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');

gulp.task('sass', () => gulp.src('./src/**/*.{scss,wxss}')
  .pipe(sass().on('error', sass.logError))
  .pipe(rename({
    extname: '.wxss'
  }))
  .pipe(gulp.dest('./dist'))
);

这样就可以完成了sass的配置,但是这样会有问题。前面讲到了wxss是支持样式导入的,也就是说import语法wxss是支持的,但css不支持,因此sass打包会把import的文件打包到当前文件,从而导致当前文件的体积变大。由于微信限制单包代码不能超过2M,因此当css越写越多的时候,这种打包方式势必会使样式文件越来越大。

解决import导入问题

那如何解决import的导入问题呢,其实也比较简单,说白了就是sass处理的时候,让其不处理import部分的语句就可以了。有两种方式可以做到,第一种是改写sass处理的源码,当遇到import语句时跳过。第二种是,在把文件交给sass处理前,我们先把import语句部分注释掉,这样sass处理的时候就会忽略了,当sass处理完成后,再把注释掉的语句打开即可。显然第一种成本比较高,也不好维护。我们采用第二种,代码如下:

const gulp = require('gulp');
const sass = require('gulp-sass');
const replace = require('gulp-replace');
const rename = require('gulp-rename');
const clean = require('gulp-clean');
const tap = require('gulp-tap');
const path = require('path');

const config = require('./build/config');

const hasRmCssFiles = new Set();
gulp.task('sass', () => gulp.src('./src/**/*.{scss,wxss}')
  .pipe(tap((file) => {
    // 当前处理文件的路径
    const filePath = path.dirname(file.path);
    // 当前处理内容
    const content = file.contents.toString();
    // 找到filter的scss,并匹配是否在配置文件中
    content.replace(/@import\s+['|"](.+)['|"];/g, ($1, $2) => {
      const hasFilter = config.cssFilterFiles.filter(item => $2.indexOf(item) > -1);
      // hasFilter > 0表示filter的文件在配置文件中,打包完成后需要删除
      if (hasFilter.length > 0) {
        const rmPath = path.join(filePath, $2);
        // 将src改为dist,.scss改为.wxss,例如:'/xxx/src/scss/const.scss' => '/xxx/dist/scss/const.wxss'
        const filea = rmPath.replace(/src/, 'dist').replace(/\.scss/, '.wxss');
        // 加入待删除列表
        hasRmCssFiles.add(filea);
      }
    });
    console.log('rm', hasRmCssFiles);
  }))
  .pipe(replace(/(@import.+;)/g, ($1, $2) => {
    const hasFilter = config.cssFilterFiles.filter(item => $1.indexOf(item) > -1);
    if (hasFilter.length > 0) {
      return $2;
    }
    return `/** ${$2} **/`;
  }))
  .pipe(sass().on('error', sass.logError))
  .pipe(replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => $3.replace(/\.scss/g, '.wxss')))
  .pipe(rename({
    extname: '.wxss',
  }))
  .pipe(gulp.dest('./dist')));

在处理import的时候,还有个地方是需要注意的。在sass中,import除了能引入css外,也可以引入变量,函数。因此,我们在处理的时候也需要注意区分,变量和函数最好有一个独立的文件目录存放,并且在import的时候,对于变量和函数,是必须交给sass处理的,也就是不能注释掉。因此,在上面的代码中,我们可以看到,我们引入了build目录下的config,其配置了sass变量和函数存放的位置,这样我们在打包的时候,遇到这样的import语句,我们就跳过,交给sass处理,否则就代表其是引入了共用的样式文件,这样我们交给sass处理前,就先将其注释掉,sass处理完成后再把注释打开。另外,import的可能是一个scss文件,但在转成wxss的时候,已经将其后缀改为了wxss,因此,在将注释打开的时候也需要更改相应的引入,这也就是gulp-replace包的作用。config的配置如下:

module.exports = {
  cssFilterFiles: ['scss/var.scss'],
};

清理无用的wxss文件

前面讲了,我们在sass中可能会定义一些变量,函数,这些文件一会一并打包到dist目录,但其内容是空的,这时候我们就需要对其进行清理,前面在打包过程中,我们有一个set变量hasRmCssFiles记录了相应的文件,这样我们遍历这个变量即可删除相应的文件,代码如下:

gulp.task('clean:wxss', () => {
  const arr = [];
  hasRmCssFiles.forEach((item) => {
    arr.push(item);
  });
  return gulp.src(arr, { read: false })
    .pipe(clean({ force: true }));
});

总结

  • wxss的特性
  • sass打包配置以及如何处理import语句
  • sass变量、函数的文件清理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
详解JSON Web Token 入门教程
Jul 30 #Javascript
JS中Promise函数then的奥秘探究
Jul 30 #Javascript
浅析java线程中断的办法
Jul 29 #Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 #Javascript
如何在js代码中消灭for循环实例详解
Jul 29 #Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 #Javascript
vue权限路由实现的方法示例总结
Jul 29 #Javascript
You might like
一些常用的php函数
2006/12/06 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
vue过滤器用法实例分析
2019/03/15 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
安全资料员岗位职责
2013/12/14 职场文书
社区党员先进事迹
2014/01/22 职场文书
一分钟演讲稿
2014/04/30 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
致运动员赞词
2015/07/22 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL