小程序怎么使用scss、less这些css预处理器语言

本文介绍了如何在微信小程序中使用scss、less等css预处理器。通过配置gulp自动化工具,监听并编译scss文件为wxss,实现了在原生小程序中使用预处理器语言的功能。详细步骤包括安装依赖、配置gulpfile.js、新建.scss文件以及运行gulp命令进行转译。
摘要由CSDN通过智能技术生成

css预处理器语言在开发过程中使用很方便。
当在开发小程序的过程中,如果我们使用mpvue或者wepy这些框架,是可以使用css预处理器语言的,但是开发原生小程序时,由于原生小程序不支持css预处理器语言,我们想使用它。该怎么办?
方法:
使用gulp监听小程序目录下所有的scss文件,使用gulp-sass编译成css文件,然后利用gulp-rename重命名css为wxss,保存到sass所在目录下,这样编译后的wxss文件就与对应的js、json文件在同一个目录了。
gulp学习网站:https://github.com/baixing/FE-Blog/issues/7

1、
全局安装gulp: npm install -g gulp
或者在当前项目中安装gulp: npm install gulp --save-dev
项目中需要的gulp的相关依赖
在这里插入图片描述

2、在项目的根目录下配置gulpfile.js
const gulp = require(‘gulp’)
const del = require(‘del’)
const uglify = require(‘gulp-uglify’)
const rename = require(‘gulp-rename’)
const cssmin = require(‘gulp-minify-css’)
const concat = require(‘gulp-concat’);
const autoprefixer = require(‘gulp-autoprefixer’)
co

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值