利用gulp实现sass书写微信小程序样式

最新推荐文章于 2024-05-10 13:43:51 发布

mercurio13zeq

最新推荐文章于 2024-05-10 13:43:51 发布

阅读量221

点赞数 1

文章标签：微信小程序 gulp sass

本文链接：https://blog.csdn.net/weixin_42491987/article/details/126893482

版权

一、原理：
利用gulp监听特定后缀名的文件变化，然后利用sass编译，生成.wxss的文件。

二、实现：

package.json中添加

  "scripts": {
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.0.0",
    "sass": "^1.41.1"
  }

在项目根目录下新建 gulpfile.js文件，内容如下：

const { task, src, dest, watch, series } = require("gulp");
const rename = require("gulp-rename"); // 重命名
const sass = require("gulp-sass")(require('sass')); // sass 转化

// sass 将 scss文件转为 wxss
task("sass", () => {
  return src("./pages/**/*.scss")
    .pipe(sass())
    .pipe(rename(path => {
      path.extname = '.wxss'
    }))
    .pipe(dest("./pages"))
});

// 监听文件
task("watch", () => {
  watch("./pages/**/*.scss", series("sass"));
});

task("start", series("sass", "watch"));