小程序支持Scss

作者: IT_小学生 | 来源:发表于2022-05-16 14:54 被阅读0次

第一步:从 VSCode 中下载插件 Live Sass Compiler
第二步:打开 小程序的 扩展,然后导入 VSCode


打开扩展
选择导入 vscode扩展

第三步:新建 .vscode 文件夹,其中创建 settings.json 文件


新建文件并写代码
{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".wxss",
            "savePath": null
        }
    ],
    "liveSassCompile.settings.generateMap": false
}

第四步:开启监听。点击“Watch Sass” 监听 Sass。


开启监听

文件结构

扩展:
现在解析的 scss代码中,会有兼容性代码产生。
css兼容性前缀,-webkit-,-moz-,-ms,-o-等
如不需要生成兼容性的代码,用以下配置文件

{
    "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".wxss",
        "savePath": null
    }],
    "liveSassCompile.settings.autoprefix": [ // 这里为空将不会有兼容性代码产生
    ],
    "liveSassCompile.settings.generateMap": false
}

如果对你有帮助,点个赞再走呗~

相关文章

  • 小程序支持Scss

    第一步:从 VSCode 中下载插件 Live Sass Compiler第二步:打开 小程序的 扩展,然后导入...

  • 【uni app】vue页面转微信小程序页面

    1、scss转换:微信小程序不支持scss语法,可以使用scss 转 css 工具转换一下即可,地址:https:...

  • 微信小程序_如何支持Less等CSS框架开发

    先说点什么呢,小程序很强大,但官方开发工具美中不足,不支持Scss,Less 等样式框架,只能支持原生CSS,所以...

  • 小程序配合vscode使用scss语法

    小程序不支持使用scss。 但是vscode作为工具配合插件使用即可。 1右键拓展设置 任意插件进入源代码编辑即可...

  • 原生微信小程序支持scss配置

    1.安装插件Live Scss Compiler 2.在项目根目录下创建文件夹 .vscode ,在文件夹下创建 ...

  • vscode插件 Live Scss Compiler

    Live Scss Compiler 实时编译scss文件为css。小程序使用的是wxss后缀的文件,所以使用这个...

  • React中怎样使用scss,less

    react默认支持用scss,不支持less,直接使用less时会报错 一,scss的使用 想要react项目中使...

  • 小程序中使用scss

    一: 下载Easy Sass image.png 二: 配置setting.json image.png 将下面...

  • vue支持scss

    使用vue-cli搭建的vue项目,默认是不支持scss的,需要安装相应的插件才得以支持,下面说一下安装使用方法 ...

  • 增加 scss 支持

    为了更好的驾驭css 我们需要sass的支持 安装 指定源解决国内node-sass安装难的问题 说明: 修改bu...

网友评论

    本文标题:小程序支持Scss

    本文链接:https://www.haomeiwen.com/subject/rmdvyrtx.html