微信小程序使用scss，gulp

css预处理器语言在开发过程中使用很方便。
当在开发小程序的过程中，如果我们使用mpvue或者wepy这些框架，是可以使用css预处理器语言的，但是开发原生小程序时，由于原生小程序不支持css预处理器语言,我们想使用它。该怎么办？
方法：
使用gulp监听小程序目录下所有的scss文件，使用gulp-sass编译成css文件，然后利用gulp-rename重命名css为wxss，保存到sass所在目录下，这样编译后的wxss文件就与对应的js、json文件在同一个目录了。
————————————————

参考资料：https://segmentfault.com/a/1190000000372547

1.全局安装gulp: npm install -g gulp
或者在当前项目中安装gulp: npm install gulp --save-dev
项目中需要的gulp的相关依赖

 2.在项目的根目录下配置gulpfile.js

代码：拿去直接使用，路径看是否需要修改

const gulp = require('gulp')
const sass = require('gulp-sass')
const rename = require('gulp-rename')
const postcss = require('gulp-postcss')
const replace = require('gulp-replace')
const pxtorpx = require('postcss-px2rpx')
const cleanCSS = require('gulp-clean-css')

const PATH = './**/*.scss'
const IGNORE_PATH = [
  './**/_*.scss',
  'node_modules/**/*',
  'miniprogram_npm/**/*'
]
const sass2wxss = () => {
  return gulp
    .src(PATH, {
      ignore: IGNORE_PATH,
      since: gulp.lastRun(sass2wxss)
    })
    .pipe(
      replace(/@import(.+?);/g, ($1, $2) =>
        /*! 这种注释不会被clean-css 处理 */
        $2.includes('./_') ? $1 : `/*! ${$1} */`
      )
    )
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(postcss([pxtorpx()]))
    .pipe(cleanCSS())
    .pipe(replace(/\/\*!\s(@import\s+.+?;)\s\*\//g, ($1, $2) => $2))
    .pipe(rename({ extname: '.wxss' }))
    .pipe(gulp.dest('./'))
}

gulp.task('transform sass to wxss', sass2wxss)

gulp.task('watch sass file change...', () => {
  gulp.watch(PATH, gulp.parallel('transform sass to wxss'))
})

gulp.task(
  'sass2wxss',
  gulp.series('transform sass to wxss', 'watch sass file change...')
)

 3.启动命令行 自动编译

命令：npm run sass2wxss