Taro+Vantui项目公共样式配置

这篇具有很好参考价值的文章主要介绍了Taro+Vantui项目公共样式配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近用Taro+Vantui从0-1开发向程序的项目,以下是我总结我在项目中遇到的问题

  1. 如何搭建一个项目,可以参开vantUI首页引导进行配置链接如下:https://antmjs.github.io/vantui/main/#/quickstart

  2. 样式配置,
    2.1 项目目录 config->index.js
    2.2.mini->webpackChain
    代码如下文章来源地址https://www.toymoban.com/news/detail-547192.html

     mini: {
        enableExtract: true,
        webpackChain(chain) {
          chain.merge({...chainConfig});
        }
    }
    //chainConfig代码如下
    const chainConfig={
    	module: {
    		rule: {
    			themeLoader: {
    				test: /\.less$/,
        			use:[
        				{
    			            loader: "less-loader",
    			            options: {
    			              lessOptions: {
    			                modifyVars: {
    			                  // 直接覆盖变量
    			                  "text-color": "#111",
    			                  "border-color": "#eee",
    			                  green: "#00c8c8",
    			                  "button-normal-border-radius": "50px",
    			                  "tag-primary-color": "#00c8c8",
    			                  "tag-border-radius": "50px",
    			                  "tag-padding": "4px 16px",
    			                  // 'primary-color': 'red',
    			                  // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
    			                  // hack: `true; @import "your-less-file-path.less";`,
    				                },
    				              },
    				            },
    				          },
        			]
    			}
    		}
    	}
    }
    
    
    

到了这里,关于Taro+Vantui项目公共样式配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 基于taro搭建小程序多项目框架

    为什么需要这样一个框架,以及这个框架带来的好处是什么? 从字面意思上理解:该框架可以用来同时管理多个小程序,并且可以抽离公用组件或业务逻辑供各个小程序使用。当你工作中面临这种同时维护多个小程序的业务场景时,可以考虑使用这种模式。灵感来自最近 w

    2024年01月24日
    浏览(28)
  • Taro3的编译配置

    taro的编译配置存放在项目根目录下的 config 文件中,有三个文件 index.js 是通用配置 dev.js 是项目开发时的配置 prod.js 是项目打包时的配置 1. 默认配置 2. 配置详情 sourceRoot 源代码存在的目录 类型: string 默认: src outputRoot 打包后的代码存在目录 类型: string 默认: dist design

    2024年02月13日
    浏览(83)
  • taro全局配置页面路由和tabBar页面跳转

    有能力可以看官方文档:Taro 文档 页面路由配置,配置在app.config.ts里面的pages里:   window用于设置小程序的状态栏、导航条、标题、窗口背景色,其配置项如下:   tabBar配置:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBa

    2024年02月06日
    浏览(43)
  • 反编译微信小程序,可导出uniapp或taro项目

    微信小程序反编译(全网通用) 微信小程序反编译 反编译主要分为四个阶段 操作流程 1. node.js安装 2. node安装模块 3. 开始反编译 4. 导入到微信开发者工具既可运行 微信小程序反编译 当碰到不会写的小程序功能时,正好看到隔壁小程序有类似的功能,一般都想借鉴一下,本

    2024年02月12日
    浏览(39)
  • taro vue3 ts nut-ui 项目

    查看 Taro 全部版本信息​ 可以使用  npm info  查看 Taro 版本信息,在这里你可以看到当前最新版本 使用命令创建模板项目: taro init 项目名 微信小程序自定义 TabBar 先安装 cnpm install pinia 以便解决 小程序的 页面首次加载 在 app.config.js 中设置 在  src 目录 下 pages 文件夹,在里

    2024年02月06日
    浏览(40)
  • Taro+NutUi 开发不同平台的小程序系列 -第一章节/项目多平台运行测试

    写在前面 今天开始我们写 Taro+NutUi 的文章,第一篇先从创建一个项目开始,后续我们持续增加功能,发布到不同的平台开发工具上看一下具体的渲染效果怎么样,之前 uniapp 也是支持各个平台发布的,甚至可以直接发布到 app 上,我前面的文章也写过,今天我们使用 Taro 将这

    2024年02月04日
    浏览(31)
  • taro小程序中如何引入css_moudle?配置后不生效的解决方法

    编译配置存放于项目根目录下的 config 目录中,包含三个文件: index.js 是通用配置 dev.js 是项目预览时的配置 prod.js 是项目打包时的配置 参考Taro官网,我们要做的是:找到项目根文件夹下的 config 文件,找到其中的 index.js 配置文件,把 cssModules 的 enable 改为 true ,如图所示:

    2024年02月16日
    浏览(34)
  • vue3之vite创建h5项目之2 (sass公共样式、声明组件、路由配置和layout组件 )

    pnpm i -D sass 1-1-1 main.ts 引入公共样式方式 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss ( 公共样式方法抽离 ) 1-3-3 src / style / reset.scss ( 重置样式 ) 1-3-4 src / style / variables.scss ( 定义的公共变量样式 ) 1-3-5 使用变量 3-1 路径文件

    2024年02月05日
    浏览(53)
  • 使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙

    在今年 8 月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的 AOSP 代码,彻底与 Android 切割,使其成为一个完全自主研发的操作系统,这将去掉 40%左右多余的代码,使系统变得更加简洁、流畅。同时,会上也预告了将在明

    2024年02月05日
    浏览(47)
  • 微信小程序+Taro 混编,Taro 使用微信原生 behaviors

    最近有一个小程序项目,因为一些原因项目架构选择了微信小程序原生+Taro 混编的方式进行开发,在开发的过程中发现 Taro 不支持使用原生的 behaviors 特性,因为混编的原因项目当中已有原生页面在使用 behaviors,所以需要一个方案在不影响其他页面的基础上使 Taro 也能使用这

    2024年02月11日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包