小程序使用gulp编译scss

依赖引入

package.json依赖，添加后使用npm install

依赖项解释：

• gulp 编译器
• gulp-inject-string 向代码里插入指定内容
• gulp-rename 修改编译后文件的名称
• gulp-sass 编译Sass
• sass gulp-sass的依赖

package.json

  "scripts": {
    "gulp": "gulp"   // 增加gulp命令，使用时运行  npm run gulp
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-inject-string": "^1.1.2",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.47.0"
  },

gulpfile.js

gulp编译流程

scss文件引用 ->
在内容前加入全局依赖引入 ->
交给sass模块编译 ->
将得到的css重命名为wxss ->
导出

配置gulp

const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const rename = require('gulp-rename')
const inject = require('gulp-inject-string')
// 默认模块，方便以后增加其他编译环节
function defaultTask() {
    sassBuild()
}
function sassBuild() {
    // gulp.src()     选择引入文件，引入文件必须放在前面，而后可以使用  “!”排除
    return gulp.src(['**/*.scss','!node_modules/**/*.scss','!style/*.scss'])
        // 向文件开始处插入全局Sass依赖
        .pipe(inject.prepend('@import \'./style/root.scss\';'))
        // 编译Sass并对错误内容输出，注意此时编译出来的默认为css文件
        .pipe(sass().on('error', sass.logError))
        // 修改导出文件后缀名为wxss
        .pipe(rename(path=>{path.extname = '.wxss'}))
        // 导出目录为当前编译文件所在目录
        .pipe(gulp.dest('.'))
}
// 监听文件修改
gulp.watch(['**/*.scss','!node_modules/**/*.scss','!style/*.scss'], sassBuild)
// 导出Sass模块，可以使用 gulp sass执行，若未全局安装gulp则使用npx gulp sass运行
exports.sass = sassBuild
// 导出默认模块
exports.default = defaultTask

运行

执行命令（三选一）

npm run gulp

npx gulp

gulp  // 若已全局安装gulp方法  npm install gulp -g