介绍
这篇文章给大家介绍怎么在微信小程序中使用sass,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
在微信小程序中,css是用wxs来表示,但写法基本一致。需要注意的是wxs扩展了两个特性,分别是:
<李> 尺寸单位
<李> 样式导入
具体可参考wxs,此处不做过多赘述。
为了方便打包sass,我们使用杯来处理我们的scss文件,将其转换为wxs。
<强>目录结构
在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码。而本次讲解用到的目录结构如下:
<李> 构建目录用来配置我们的打包参数,目前里面只有一个config.js文件
<李> dist目录为打包输出的目录,也是小程序运行的目录
<李> gulpfile。js配置打包的任务
<李> src就是我们的源代码目录
src的目录结构如下:
<强>安装依赖
yarn add gulp gulp-sass gulp-rename gulp-replace gulp-tap gulp-clean - d 吞咽和gulp-sass为打包sass必须,gulp-rename则负责把scss后缀改为wxs, gulp-replace负责内容的替换(这个后面会讲到),gulp-tap用来处理当前执行的文件,gulp-clean负责清除我们不需要的文件。
<强> sass打包配置
杯配置打包sass非常简单,代码如下:
const gulp =,要求(& # 39;杯# 39;);
const sass =,要求(& # 39;gulp-sass& # 39;);
const rename =,要求(& # 39;gulp-rename& # 39;);
gulp.task (& # 39; sass # 39;,,(),=祝辞,gulp.src (& # 39;。/src/* */*。{scss, wxs} & # 39;)
.pipe才能(萨斯()内(& # 39;错误# 39;,,sass.logError))
.pipe(重命名({才能
,,,extname:, & # 39; .wxss& # 39;
}))才能
.pipe才能(gulp.dest (& # 39;。/dist # 39;))
); 这样就可以完成了sass的配置,但是这样会有问题。前面讲到了wxs是支持样式导入的,也就是说导入语法wxs是支持的,但css不支持,因此sass打包会把进口的文件打包到当前文件,从而导致当前文件的体积变大。由于微信限制单包代码不能超过2 m,因此当css越写越多的时候,这种打包方式势必会使样式文件越来越大。
<强>解决进口导入问题
那如何解决的导入导入问题呢,其实也比较简单,说白了就是sass处理的时候,让其不处理导入部分的语句就可以了。有两种方式可以做到,第一种是改写sass处理的源码,当遇到导入语句时跳过第。二种是,在把文件交给sass处理前,我们先把导入语句部分注释掉,这样sass处理的时候就会忽略了,当sass处理完成后,再把注释掉的语句打开即可。显然第一种成本比较高,也不好维护。我们采用第二种,代码如下:
const gulp =,要求(& # 39;杯# 39;);
const sass =,要求(& # 39;gulp-sass& # 39;);
const replace =,要求(& # 39;gulp-replace& # 39;);
const rename =,要求(& # 39;gulp-rename& # 39;);
const clean =,要求(& # 39;gulp-clean& # 39;);
const tap =,要求(& # 39;gulp-tap& # 39;);
const path =,要求(& # 39;path & # 39;);
const config =,要求(& # 39;。/构建/配置# 39;);
const hasRmCssFiles =, new 设置();
gulp.task (& # 39; sass # 39;,,(),=祝辞,gulp.src (& # 39;。/src/* */*。{scss, wxs} & # 39;)
.pipe才能(丝锥((文件),=祝辞,{
,,,//,当前处理文件的路径
,,,const filePath =, path.dirname (file.path);
,,,//,当前处理内容
,,,const content =, file.contents.toString ();
,,,//,找到过滤器的scss,并匹配是否在配置文件中
,,,content.replace (/@ import \ s + [& # 39; |“) (+) (& # 39; |“);/g,,($ 1, $ 2),=祝辞,{
,,,,,const hasFilter =, config.cssFilterFiles.filter (item =祝辞,2.美元indexof()项,祝辞,1);
,,,,,//,hasFilter 祝辞,0表示过滤器的文件在配置文件中,打包完成后需要删除
,,,,,if (hasFilter.length 祝辞,0),{
,,,,,,,const rmPath =, path.join (filePath, 2美元);
,,,,,,,//,将src改为dist, .scss改为.wxss,例如:& # 39;/xxx/src/scss const.scss& # 39;,=祝辞,& # 39;/xxx/dist/scss const.wxss& # 39;
,,,,,,,const filea =, rmPath.replace (/src/,, & # 39;经销# 39;).replace (/\ .scss/,, & # 39; .wxss& # 39;);
,,,,,,,//,加入待删除列表
,,,,,,,hasRmCssFiles.add (filea);
,,,,,}
,,,});
,,,console.log (& # 39; rm # 39;,, hasRmCssFiles);
}))才能
.pipe才能(替换(/(@ import。+)/g,($ 1, $ 2),=祝辞,{
,,,const hasFilter =, config.cssFilterFiles.filter (item =祝辞,1.美元indexof()项,祝辞,1);
,,,if (hasFilter.length 祝辞,0),{
,,,,,return 2美元;
,,,}
,,,return “/* *, $ {$ 2}, * */';
}))才能
.pipe才能(萨斯()内(& # 39;错误# 39;,,sass.logError))
.pipe才能(替换(/(\/\ \ * \ s {0}) (@ +) (\ s * {0} \ \ * \/)/g,,($ 1, $ 2, 3美元),=祝辞,取代3.美元(/\ .scss/g, & # 39; .wxss& # 39;)))
.pipe(重命名({才能
null
null
null
null
null
null
null
null
null
null
null
null
