微信小程序.scss编译.wxss文件

注意：生成wxss是通过visual studio code工具开发场景下实现，若直接通过小程序开发工具使用easysass插件即可

1.在项目控制台初始化项目

npm init -y

2.安装sass

npm i sass -S  

3.安装chokidar：监听文件变化

npm i chokidar -S

4.在根目录创建server.js文件然后配置sass编译

const chokidar = require('chokidar');
const sass = require('sass');
const path = require('path');
const fs = require('fs');
//监听的文件
console.log('我开始自动编译SCSS文件');
let timer = null;
chokidar.watch('**/*.scss', {
}).on('change', (file) => {
  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    const { dir, name } = path.parse(file);
    sass.render({
      file: file
    }, function (err, result) {
      if (!err) {
        const newFile = `${dir}/${name}.wxss`;
        fs.writeFileSync(newFile, result.css);
        console.log(`updated ${newFile}  at: ${new Date().toLocaleTimeString()}`);
      }
    });
  }, 200)

});

5.最后创建自定义运行命令：在package.json文件下

    "serve": "node server.js"

然后在控制台执行命令 npm run serve,之后再编写scss文件后就会自动编译wxss