微信小程序中使用sass开发

DEMO地址：github.com/shiyuegongs…

简介

简单的说，就是把sass文件编译成wxss文件啦。

前置条件

    1、安装了node
    2、没了

基础步骤

第一步：项目根目录初始化package.json

   npm init 

第二步：安装所需依赖

   npm install chokidar -D
   npm install sass -D

第三步：项目根目录新建一个server.js,Ctrl+C、Ctrl+V 以下代码

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)
});

第四步：在项目根目录 执行node server.js

   node server.js

如何使用

第一步（新建）：在原有的wxss文件目录下，直接新建一个同名的scss文件

第二步（编写）： 直接在scss文件中编写需要的css就好啦，wxss就自动生成啦。

结束语

没有结束语，就这样子把