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

前言

在微信小程序中，css是用wxss来表示的，但是写法基本一样。应该注意的是，wxss扩展了两个特性，即：

尺寸单位样式导入详见wxss，此处不赘述。

为了便于打包sass，我们使用gulp来处理我们的scss文件，并将它们转换成wxs。

目录结构

在开发中，我们通常有一个src源目录和一个dist目录来输出打包的代码。本讲座中使用的目录结构如下：

构建目录用于配置我们的打包参数。目前里面只有一个config.js文件dist目录，也是小程序运行的目录。gulpfile.js配置打包任务src，这是我们的源代码目录。src的目录结构如下：

安装依赖关系

纱加大口-sass大口-重命名大口-替换大口-tap大口-clean-d大口和大口-sass是打包sass所必需的，大口-重命名负责将scss后缀改为wxss，大口-替换负责内容替换(这将在后面描述)，大口-tap用于处理当前执行的文件，大口-clean负责清除我们。

Sass封装配置

大口配置打包sass非常简单，代码如下：

const大口=require('大口')；const sass=require(' gout-sass ')；const rename=require('大口-重命名')；大口. task('sass '，()=大口. src('。/src/**/*。{scss，wxss} ')。管道(sass)()。on('error '，sass.logError))。管道(重命名({ extname : })。wxss' }))。烟斗(大口。目的地。/dist’))；这样就完成了sass的配置，但是会有问题。如前所述，wxss支持样式导入，也就是说导入语法wxss支持，但是css不支持。因此，sass打包会将导入的文件打包到当前文件中，这将导致当前文件的体积更大。因为微信把单个包的代码限制在不超过2M，当css越写越多的时候，这种打包方式必然会让样式文件越来越大。

解决进口进口问题

如何解决进口的进口问题其实比较简单。说白了，当sass处理的时候，让sass不要处理导入部分的语句。有两种方法可以做到这一点。首先是重写sass处理的源代码，遇到导入语句时跳过它。第二，在将文件提交给sass进行处理之前，我们先对导入语句进行标注，这样sass在处理时就会忽略它，然后在sass完成处理后打开标注的语句。显然，第一个很贵，也很难维护。我们使用第二个，代码如下：

const大口=require('大口')；const sass=require(' gout-sass ')；const replace=require('大口-替换')；const rename=require('大口-重命名')；const clean=require('大口-干净')；const tap=require('囧-tap ')；const path=require(' path ')；const config=require('。/build/config’)；const hasRmCssFiles=new Set()；大口。任务(' sass '，()=大口。src('。/src/* */*。{scss，wxss} ')。pipe(tap)((file)={//当前处理文件路径const file path=path . dirname(file . path)；//当前处理内容const content=file . contents . tostring()；//找到过滤器的SCS，匹配是否在配置文件中。替换(/@ import \ s ['|'](。) ['|'];/g，($1，$ 2)={ const HasFilter=config . cssFilterfiles . filter(item=$ 2 . indexof(item)-1)；//hasFilter 0表示Filter的文件在配置文件中，如果(hasFilter . length 0){ const rmpath=path . join(file path，$2)打包后需要删除；//将src更改为dist和。SCS至。例如，wxss:'/XXX/src/scss/const . scss '='/XXX/dist/scss/const . wxss ' const filea=rmpath . replace(/src/，' dist ')。replace//join hasrmcssfiles . add(filea)要删除；} });console.log('rm '，hasRmCssFiles)；})) .管道(替换(/(@import。)/g，($1，$ 2)={ const HasFilter=config . cssFilterfiles . filter(item=$ 1 . indexof(item)-1)；if(HasFilter . length 0){ return $ 2；} return `/* * $ { $ 2 } * */`；})) .管道(sass)()。on('error '，sass.logError))。管道(替换(/(\/\*\*\s{0，})(@。)(\s{0，}\*\*\/)/g，($1，$2，$3)=$3.replace(/\。scss/g,wxss’))。管道(重命名({ extname : })。wxss '，}))。烟斗(大口。目的地。/dist’))；在处理进口时，还有一点需要注意。在sass中，导入不仅可以引入css，还可以引入变量和函数。因此，我们在处理时也要注意区分。最好将变量和函数存储在一个独立的文件目录中，导入时必须将变量和函数交给sass处理，即不能注释掉。因此，在上面的代码中，我们可以看到我们在build目录下引入了config，它配置了sass变量和函数的存储位置，这样当我们在打包时遇到这样的import语句时，我们可以跳过它，交给sass处理，否则就意味着它引入了一个通用的样式文件，所以在交给sass处理之前，我们应该先把它注释掉，然后在sass完成处理后打开注释。此外，导入可能是一个scss文件，但是当它被转换为wxss时，它的后缀被更改为wxss。因此在打开评论时需要更改相应的导入，这是大口-替换包的功能。配置配置如下：

module . exports={ cssfilterfiles :[' scss/var . scss ']，}；清理无用的wxss文件

如前所述，我们可以在sass中定义一些变量和函数。这些文件将被打包到dist目录中，但是它们的内容是空的，所以我们需要清理它们。在打包过程中，我们有一个记录相应文件的set变量hasRmCssFiles，这样我们就可以通过遍历这个变量来删除相应的文件。代码如下：

gough . task(' clean : wxss '，()={ const arr=[]；hasrmcssfiles . foreach((item)={ arr . push(item)；});返回大口. src(arr，{ read: false })。管道(干净({ force : true })；});摘要

wxss sass包配置的特点以及如何处理sass变量的文件清理和导入语句的函数都是本文的内容。希望能帮助大家学习，支持我们。