小程序 - 使用Sass预处理器

最新推荐文章于 2024-08-15 10:22:12 发布

jnChen10

最新推荐文章于 2024-08-15 10:22:12 发布

阅读量1.5k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/sinat_33184880/article/details/104106684

版权

微信小程序原生不支持CSS预处理器语法，但可通过创建.scss文件并使用Gulp构建工具转换为.wxss。本文介绍了如何配置Gulp、安装所需依赖，并展示了项目目录结构，说明了VSCode编辑scss文件及通过gulp命令进行转译的过程。

摘要由CSDN通过智能技术生成

小程序使用CSS预处理器

微信小程序原生不支持CSS预处理器的语法，但仅仅支持@import引入其他.wxss模块

解决方法：在每个页面下新建.scss文件，使用Gulp构建工具将.scss文件转化成.wxss

1.在小程序项目根目录执行

npm init

2.然后安装 gulp、gulp-sass、gulp-rename（使用Less则安装gulp-less）

npm i gulp gulp-sass gulp-rename -D

3.新建 gulpfile.js 文件

const gulp = require('gulp');
const rename = require('gulp-rename'); // 重命名插件
const sass = require('gulp-sass');

function handleSass() {
  return gulp.src('mp/**/*.scss')            // 读取mp目录下的所有 .scss 文件
    .pipe(sass().on('error', sass.logError)) // 使用 gulp-sass 插件转化
    .pipe(rename({ extname: '.wxss' }))      // 将拓展名修改为 .wxss
    .pipe(gulp.dest('mp'))                   // 导出到 mp 文件夹下
}

// watch 文件监听
// ign