教你如何在原生小程序中使用scss预处理语言
发布于 3 年前 作者 xiuying42 1039 次浏览 来自 分享

我们会发现，如果不使用任何预处理语言，我们写代码会一连串很长又乱或者写着写着会很难一眼找到你想要的类名称，所以我们使用了预处理语言后，会提高我们开发效率和易维护代码，以下内容就是教你如何使用gulp处理scss预处理语言。内容很精彩千万别走开，不仅仅可以在小程序里面使用，还可以在其它地方使用。

安装gulp

  • 全局安装gulp npm install --global gulp-cli

  • 在项目目录下创建 package.json 文件 npm init

  • 安装 gulp，作为开发时依赖项

    • 安装gulp依赖 npm install --save-dev gulp
    • 安装修改文件名依赖 npm install --save-dev gulp-rename
    • 安装sass依赖 npm install sass gulp-sass --save-dev
    • 安装no-sass,因为gulp-sass需要 npm install --save-dev node-sass
  • 最后一步，终端输入gulp即可跑起?，好像缺少了必要配置文件，所有你是跑不起的，继续往下看哈

配置文件

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');
const { src, dest, watch } = gulp;

const scssFiles = ['**/*.scss', '!node_modules/**']; 

const compileSCSS = function() {
  // 所有文件夹下得scss文件,排除components目录,排除node_modules目录
  return src(scssFiles)
    .pipe(sass().on('error', sass.logError))
    .pipe(rename({extname: '.wxss'}))
    .pipe(dest('./', {overwrite: true})); // 编译出来的文件放回scss文件所在目录
};

module.exports.default = function() {
  watch(scssFiles, compileSCSS)
};
  • 按照上面安装和配置完成即可得到你想要的gulp把.scss打包成.wxss，这里有写热更新保存文件即可打包输出.wxss文件，然后去当前项目终端输入gulp，一个简单的打包工具完成了~

小程序上传代码过滤 *.scss文件，避免我们小程序包过大

  • 我们要找到文件project.config.js文件，然后在packOptions下的一个属性叫ignore写正则去过滤我们不需要的文件，减少小程序上传包的大小，例如下面简单示例：
"packOptions": {
    "ignore": [
      {
        "type": "regexp",
        "value": "\\.scss$"
      },
      {
        "type": "file",
        "value": "package-lock.json"
      },
      {
        "type": "file",
        "value": "gulpfile.js"
      }
     ]
}

可能运行时报错及解决方法

  • 如果你是安装依赖"gulp-sass": "^4.0.0"，你的配置文件gulpfile.js的引入模块自定义变量sass可以写成const sass = require('gulp-sass')
  • 但是如果你安装依赖"gulp-sass": "^5.0.0"及以上我们配置文件gulpfile.js的引入模块自定义变量sass必须这样写const sass = require('gulp-sass')(require('sass'));,否者会报错，因为gulp sass 5没有默认的sass编译器，下面是错误提示：
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.

结束语

  • 如果看完还不会，可以留言哦，项目会推送到gitee欢迎查看或者start~
  • 如果想看更多小程序内容，也可以去我的掘金号查看查看，本文也会同步过去
  • 有进步，感觉有用记得点个赞哦
回到顶部