微信小程序 基础模板引入sass的两种方法

这篇具有很好参考价值的文章主要介绍了微信小程序 基础模板引入sass的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

推荐使用第二种方法

一、VSCode扩展引入(旧)

1.vscode搜索扩展 Easy Sass安装

微信小程序 基础模板引入sass的两种方法

2.微信开发者工具导入vscode安装的所有扩展

微信小程序 基础模板引入sass的两种方法

3.修改sass扩展配置

打开扩展目录

微信小程序 基础模板引入sass的两种方法

找到刚导入的sass扩展

微信小程序 基础模板引入sass的两种方法

打开package.json文件

微信小程序 基础模板引入sass的两种方法

改成这样 保存

微信小程序 基础模板引入sass的两种方法

4.重新打开此项目 配置完事

微信小程序 基础模板引入sass的两种方法

5.使用

在需要使用sass的page下创建.scss文件,.wxss文件不要删掉

微信小程序 基础模板引入sass的两种方法

在.scss文件里编写样式代码,保存后点开.wxss文件,会发现scss内容自动编译为相应的wxss内容

微信小程序 基础模板引入sass的两种方法
微信小程序 基础模板引入sass的两种方法

页面样式生效

二、原生内置编译插件直接支持sass(新)

微信小程序 基础模板引入sass的两种方法

1.进到project.config.json文件,在setting对象下添加属性useCompilerPlugins

微信小程序 基础模板引入sass的两种方法

2.将.wxss文件改成.scss文件编写代码即可使用

微信小程序 基础模板引入sass的两种方法文章来源地址https://www.toymoban.com/news/detail-500187.html

到了这里,关于微信小程序 基础模板引入sass的两种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 分享的两种方式:菜单级和按钮级

    在使用微信小程序的时候,我们可能会设计到一些视频的一些分享等,那么视频分享也分为两种方式,例如下图,当我们点击的时候,进行一个转发分享的一个操作 那么在原先代码的基础上,我们需要在原先代码的基础上button按钮上设置open-type=“share” 添加完open-type=\\\"share\\\"后

    2024年02月20日
    浏览(31)
  • 微信小程序在TS模板下引入TDesign组件

    TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库 新建一个空白项目,这里可以选择TS-基础模板 新建项目目录结构如图所示: 注意这里其实小程序的文件都存放在miniprogram文件夹下,因此我们后续安装npm包时需要进入miniprogram文件

    2024年02月03日
    浏览(33)
  • 微信小程序入门及开发准备,申请测试号以及小程序开发的两种方式,目录结构说明

    目录 1. 介绍 1.1 优点 1.2 开发方式 2. 开发准备 2.1 申请 2.2 申请测试号 2.2 小程序开发的两种方式 2.3 开发工具 3. 开发一个demo 3.1 创建项目 3.2 配置 3.3 常用框架 3.3 目录结构说明 3.4 新建组件 是一种不需要下载安装即可使用的应用,是一种 触手可及 的应用 可以借助微信的流量

    2024年02月05日
    浏览(33)
  • IDEA引入本地jar包的两种方法(idea程序引入和maven)

    公司买的第三方物联网设备,对接数据信息,需要引入他们自己的jar包进行开发。 1.打开idea找到项目结构 2.继续点击模块 3.继续点击+ 4.然后选择需要导入的jar包,点击完成,引用,就可以了 1.找到jar包所在文件夹,打开命令行界面cmd 2.运行命令 文件名称(文件地址)path-to-fi

    2024年04月10日
    浏览(37)
  • 微信小程序配置和使用sass

    在项目中找到project.config.json文件,找到setting属性,加上 useCompilerPlugins 属性。注意:如果想要配置 less 那么需要把数组里的元素改成 less 即可。 修改原本的 index.wxss 文件名为 index.scss 。注意:配置的是sass预处理语言,对应的文件为.scss。

    2024年04月16日
    浏览(27)
  • 【jspdf】前端html生成pdf的两种办法 以及 引入中文字体

    1、使用canvas把html生成图片,然后使用jspdf生成pdf。优点:生成的pdf 样式还原度极高,缺点:图片形式的pdf无法编辑 2、直接使用jspdf的html方法直接把html生成pdf。优点:可编辑,缺点:只是把文本内容搂出来生成pdf,也就是说样式基本无,而且jspdf不支持中文字体的,如果有中

    2024年02月10日
    浏览(35)
  • 微信小程序引入地图

    微信小程序引入地图 1.可以直接在页面设置map标签显示出地图,然后通过设置其大小控制地图显示面积。 2.可以通过scale改变地图缩放级别和longitude和latitude属性设置地图中心的经纬度。 3.可以通过markers属性设置地图标点 引入的数组必须是一下格式: 如果是从接口获取的数据

    2024年02月09日
    浏览(43)
  • 【微信小程序模板直接套用】微信小程序制作模板套用平台

    微信小程序模板直接套用是小程序制作的好工具,特别是对于没有太多代码基础的企业。下面我分享一个微信小程序模板直接套用平台,超60个行业的微信小程序制作模板套用,页面内容丰富样式多样的微信小程序制作模板套用。 微信小程序模板直接套用平台的存在,就是为

    2024年02月09日
    浏览(42)
  • 微信小程序引入Uview

    1.使用Hbuilder创建小程序项目,模板选空。 直接在uni-app插件市场通过uni_modules的形式进行安装,在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可 地址:Uview2.0下载地址 1.引入Uview 在项目根目录中的main.js中,引入并使用uView的JS库,注

    2023年04月12日
    浏览(27)
  • 微信小程序引入weui

    project.config.json 找到 packNpmManually 和 packNpmRelationList 修改成如下内容: 根目录下 app.wxss 引入 weui @import \\\'weui-miniprogram/weui-wxss/dist/style/weui.wxss\\\'; 4.引入需要使用的包 index.json  index.wxml  

    2024年02月10日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包