在微信小程序中使用sass，需要自己做一些相关配置，这里有一个demo，这里介绍两种常见的配置方式，亲测可用。

查看本文对应的的演示项目请点击这里 wechat-miniprogram-scss。

使用VSCode的插件进行配置(推荐)

  1. 安装 easy sass 插件
  2. 修改 settings.json 配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    "easysass.formats": [
      {
        "format": "expanded",
        "extension": ".wxss"
      },
      {
        "format": "compressed",
        "extension": ".min.wxss"
      }
    ]
  3. 上面 expanded 是编译生成的 .wxss 文件，compressed 是压缩之后的 .wxss 样式文件，这些配置都是可以自定义的
  4. 配置完毕，我们直接在vscode中编码，就会发现插件会自动将 .scss 文件转为 .wxss 文件。

使用gulp转换

  1. 安装如下的package：
    1
    2
    3
    4
    5
    6
    gulp
    gulp-changed
    gulp-rename
    gulp-sass
    gulp-watch
    sass
  2. 在项目根目录添加gulpfile.js配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    const gulp = require('gulp');
    const sass = require('gulp-sass')(require('sass'));
    const rename = require('gulp-rename');
    const changed = require('gulp-changed');
    const watcher = require('gulp-watch');

    // 自动监听
    gulp.task('default', gulp.series(function() {
      watcher('./pages/**/*.scss', function(){
        miniSass();
      });
    }));

    // 手动编译
    gulp.task('init', function(){
      miniSass();
    });

    function miniSass(){
      return gulp.src('./pages/**/*.scss')//需要编译的文件
        .pipe(sass({
          outputStyle: 'expanded'//展开输出方式 expanded
         }))
         .pipe(rename((path)=> {
          path.extname = '.wxss'
        }))
        .pipe(changed('./pages')) //只编译改动的文件
        .pipe(gulp.dest('./pages')) //编译
        .pipe(rename((path)=> {
          console.log(`编译完成文件：'pages/${path.dirname}/${path.basename}.scss'`)
        }))
    }
  3. 修改npm scripts
    1
    2
    3
    "scripts": {
      "scss": "gulp init default",
    }
  4. 运行gulp
    1
    npm run scss
    这时，gulp 就会监听pages/目录下的修改过的 .scss 文件，并实时的转为 .wxss 文件。这里有一点就是当编写的scss文件有错误时，监听会停止，需要手动重启。