实现思路
使用脚本监听某个目录文件变化,把sass文件内容编译成wxss后缀的文件。
目录结构
--assets(存放静态资源目录)
----scss(存放scss源文件目录)
----wxss(存放编译后的wxss文件目录)
scss源文件结构
变量文件_var.scss
$primary-color: #31373F;
$secondary-color: #99A0AA;
$third-color: #989FA9;
$primary-font: 38rpx;
复制代码
混合器文件_mixin.scss
@mixin center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin between {
display: flex;
align-items: center;
justify-content: space-between;
}
复制代码
全局文件global.scss
@import "var";
@import "mixin";
.page {
background: red;
}
复制代码
首页home.scss
@import "var";
@import "mixin";
.page-home {
background: blue;
}
复制代码
Nodejs监听sass文件
安装依赖
npm install -save-dev chokidar node-sass
复制代码
watcher.js
const chokidar = require('chokidar');
const sass = require('node-sass');
const path = require('path');
const fs = require('fs');
//监听的文件
const watchFile = path.join(__dirname, "/src/miniprogram/assets/scss/*.scss")
chokidar.watch(watchFile).on('all', (event, file) => {
const { dir, name } = path.parse(file);
//忽略以_开头的文件
if(name.startsWith('_')){
return;
}
console.log(event, file);
//编译生成的wxss文件目录
let target = path.join(path.resolve(dir,'..'),'wxss');
sass.render({
file: file,
outputStyle: "compact"
}, function(err, result) {
if(!err){
const newFile = `${target}/${name}.wxss`
fs.writeFile(newFile, result.css, function(err){
if(!err){
//file written on disk
console.log(`updated ${newFile}`)
}
});
} else {
console.log(err)
}
});
});
复制代码
npm scripts命令
{
...
"scripts": {
"sass-watch": "node watcher.js"
},
...
}
复制代码
app.wxss中引入编译后的wxss文件
@import "./assets/wxss/base.wxss";
@import "./assets/wxss/home.wxss";
@import "./assets/wxss/mine.wxss";
复制代码
More