微信小程序使用scss编译wxss文件的配置步骤

最新推荐文章于 2025-01-09 14:57:05 发布
原创 最新推荐文章于 2025-01-09 14:57:05 发布 · 2.5k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #scss #前端

文章介绍了如何在微信小程序开发中利用vscode的easysass插件，通过4个步骤：安装插件、导入到微信工具、修改package.json配置和重启工具，实现scss样式的编译为.wxss文件。

文章目录


微信小程序开发者工具集成了 vscode 编辑器，可以使用 vscode 中众多的插件，为我们开发微信小程序提供了极大的便利。
可以借助 easysass 插件实现在微信开发中使用 sass，安装步骤如下。

1、在 vscode 中搜索 easysass 插件并安装

在这里插入图片描述

2、在微信开发工具中导入安装的easysass插件

在这里插入图片描述

3、修改 spook.easysass-0.0.6/package.json 文件中的配置

在这里插入图片描述
找到这个文件并打开
在这里插入图片描述
打开里面的package.json，修改里面的内容在这里插入图片描述
按此修改

最低0.47元/天 解锁文章
迷小圈
关注
微信小程序使用 scss
sywdebug的博客
09-09 1518
重新加载扩展后，默认情况下这个扩展是已经启动的，但是这个扩展默认是将 scss 转为 css 和 min.css 而不是 wxss，所以需要做一些修改。修改一下即可，使用 scss 基本就用不到修改 wxss 了，所以我这里使用压缩视图，然后把后缀改为.wxss 即可。可以看到这里默认有两个配置，一个是扩展视图的.css，一个是压缩视图的.min.css。再次打开后就可以看到扩展已经有 easy sass 了。筛选到准确设置，并打开配置文件。安装完成后会让重新加载扩展。
在微信小程序中使用 SCSS
f18855666661的博客
06-21 5188
微信小程序开发者工具集成了 vscode 编辑器，可以使用 vscode 中众多的插件，为我们开发微信小程序提供了极大的便利。我们可以借助 easysass 插件实现在微信开发中使用 sass，安装步骤如下。 1，在 vscode 中安装 easysass 插件。 2，复制easysass 插件到微信开发者工具的扩展文件夹中，并启用这个插件。 vscode 插件的安装目录在：C:\Users\用户\.vscode\extensions 拷贝spook.easysass-0.0.6 文件...
使用vscode让scss或less，转换成wxss
辉生活-记录程序生活的点滴。
06-30 2742
1、scss请先下载Easy Sass,less下载Easy Less,我自己是用的scss,所以从图中可以看到我已经安装Easy Sass了。 2、要下载直接搜索框搜索，找到对应的插件就可以了。 3、打开设置文件，可能有些小伙伴不知道怎么打开，我这里说一下（快捷键ctrl+shift+p可以打开搜索，输入setting,点击Preferences:Open Settins(JSON)就可以了） 4、编辑以下配置，这里方便小伙伴们复制，粘贴我把配置放到下面。 "easysass.formats": [
微信小程序-微信开发者工具如何使用SCSS编译WXSS
耶斯莫鱼拉的博客
08-10 1655
微信开发者工具如何使用SCSS编译WXSS
微信小程序中使用SCSS编译WXSS
weixin_53805188的博客
01-05 3683
微信小程序安装easySass
微信小程序开发设置支持scss文件
最新发布
j15087159186的博客
01-09 1018
首先找到project.config.json文件，打开文件在setting下设置useCompilerPlugins，在useCompilerPlugins数组中增加"sass"在微信小程序开发中，默认是不支持scss文件的，创建文件的时候，css文件默认创建的是wxss后缀结尾的，但是用习惯了scss的怎么办呢？
less/sass 文件编译成微信小程序wxss文件
03-29
在做demo小示例的过程中，我发现了一个极为让人为难的事儿：如何让 less/sass 文件转成小程序的 wxss 文件。 对于基本不使用原生 css ，而习惯编写 less 的我，这个事儿让我的样式编写相当的吃力。 在尝试配置 ...
webstorm下scss文件 编译成微信小程序wxss文件
ktutu的博客
12-12 6938
确保本地全局安装过scss,未安装执行下面命令安装 npm install scss -g 1. webstorm设置-scss编译成wxss（1）.（2）. Arguments输入:--no-cache --update $FileName$:$FileNameWithoutExtension$.wxssOutput paths to refresh输入:$FileNameWithoutExte
微信小程序-4
weixin_64729620的博客
10-18 1859
微信小程序笔记4
微信小程序轻中愉快使用scss构建wxss文件
记性不好，写作只为记录，下次直接搬。
03-08 3242
微信小程序优雅的使用scss
使用scss开发小程序（各种小程序平台通用）
03-29
微信小程序的 wxss 、阿里旗下淘宝、支付宝小程序的 acss 等等语法很类似原生css，但是在web开发里用惯了动态css语言，再写回原生css很不习惯，尤其是父子样式的嵌套写法非常繁琐。 因此，我希望能有一个自动化构建方案，能够简单地将scss转换成小程序的样式语言。 方案1 以前写微信小程序的依赖库时用过，使用gulp编译，将源码和编译后的代码分别放到src和dist两个目录。gulp会处理src下面的所有文件，将其中的scss转换成css，并将其他所有文件原封不动挪到dist下相应位置。 这里就不详细说了，代码参考 Wux 。 方案2 非常简单直接，使用 Webstorm / IDE
详解如何在微信小程序中愉快地使用sass
10-18
主要介绍了详解如何在微信小程序中愉快地使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序使用scss
m0_56733780的博客
01-04 547
微信小程序使用scss
微信小程序设置scss编译
G3488950688的博客
03-26 791
微信小程序修改css类型，微信小程序设置scss
微信小程序如何使用SCSS
qq_43588387的博客
07-07 6616
微信小程序开发者工具集成了 vscode 编辑器，可以使用 vscode 中众多的插件，为我们开发微信小程序提供了极大的便利。我们可以借助 easysass 插件实现在微信开发中使用 sass，安装步骤如下。 接下来打开微信开发者工具的扩展文件夹。编辑 => 打开编辑器扩展文件 启用这个插件。 设置编译结果文件的后缀为 “.wxss”。———————————————— 声明：本文主要根据优快云博主「纷飞丿」的原创文章重新修改整理 原文链接：https://blog.youkuaiyun.com/f188556666
微信小程序项目如何在vsCode上利用scss有效开发
没有翅膀的我们，只是随便认为不能飞而已
04-02 946
安装插件 Sass Live Sass Compiler 编译 已下插件让vscode支持微信小程序 vscode weapp api，这是小程序的语法结构api vscode wxml这个插件，主要是针对wxml文件的 Easy WXLESS，是针对wxss文件的 vscode-wechat 重启 用vscode打开小程序项目 配置项 { "files.associations": { "*.wxml": "html", "*.wxss": "css"
微信小程序如何使用scss编译wxss文件
嗨，大家好，我是爱搞知识的咸虾米
02-10 2514
微信小程序开发者工具集成了 vscode 编辑器，可以使用 vscode 中众多的插件，为我们开发微信小程序提供了极大的便利。我们可以借助 easysass 插件实现在微信开发中使用 sass，安装步骤如下。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值