微信小程序sass不编译怎么办_微信小程序中使用Sass

实现思路

使用脚本监听某个目录文件变化，把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