Taro+Nutui-taro 自定义主题配置不生效的解决方案

最新推荐文章于 2024-07-05 11:53:16 发布
最新推荐文章于 2024-07-05 11:53:16 发布
阅读量3.9k 收藏
点赞数 2
分类专栏： 小程序 Taro+Nutui+ts 文章标签： javascript vue.js 小程序 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44514665/article/details/122202203
版权
本文介绍了在Taro+Nutui项目中遇到自定义主题配置不生效的问题及解决方案。按照官方推荐方法配置无效后，通过查看git仓库相关issue找到解决办法。解决步骤包括：新建自定义变量scss文件，修改config/index.js和app.ts中的样式引入。
摘要由CSDN通过智能技术生成

配置定制化主题官方提供的具体方法如下：
推荐方法https://nutui.jd.com/#/theme

但是按照官网的配置还是不生效，使用taro版本是3.3.17，@nutui/nutui-taro版本是3.1.8
配置

// vue/cli 3 以上版本修改 vue.config.js 的配置
module.exports = {
   
    css: {
   
        loaderOptions: {
   
            // 给 sass-loader 传递选项
            scss: {
   
                // @/ 是 src/ 的别名
最低0.47元/天 解锁文章
爱倒腾
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东nutui框架自定义主题
peade的博客
04-09 4268
在官方文档里给出了自定义主题的方法，文档地址。文档里没有详细说明怎么配合vue-cli3的写法。 我自己在使用的时候，摸索了好一会儿。 第一步：设置bable.config.js module.exports = { presets: [ '@vue/app' ], 'plugins': [ ['@nutui/babel-plugin-separate-impo...
Taro,在安装Taro-ui后，样式无效处理方法
SmokerSoul的博客
02-21 4282
@import “~taro-ui/dist/style/index.scss”; 放入 这样可以全局调用！！！！
使用 NextUI 样式失效的问题及解决方法
最新发布
Typhoon0906的博客
07-05 259
本文记录了使用 NextUI 框架时出现的样式失效问题及其解决方法。
Taro UI 样式在微信小程序没有生效
前端_小学生的博客
12-07 2122
Taro UI引入的都没有问题，但是微信小程序没有生效 这是官网的描述 检查你的微信开发者工具 修改调试基础库 ---- 用最高的版本即可
Taro nutUI 出现 [mini-css-extract-plugin] Conflicting order 报错
PokoMobula的博客
05-21 137
你也可以不使用 unplugin-vue-components 插件这种自动按需引入样式的方式，而是在项目入口处手动注册组件、引入对应组件的样式，这样所有组件样式的顺序由自己控制，当然不会出现这个问题，但是实在很麻烦。1、如果你的文件中出现了下面这种使用方式，在不同的页面中引入相同样式时的顺序不同，mini-css-extract-plugin 插件将认为这是错误的，因为样式的先后顺序可能会影响实际的表现效果。NutUI 各个组件的样式之间没有冲突，即其顺序是。
Taro组件没写错就是不显示，解决方法
caarrrrite的博客
01-16 1291
这个问题困扰了我一天，区别就在于一个地方 这句话里 export default class course extends Component { 不能用Taro.Component 要不然样式就不会显示 最后引用是这样写的
taro项目升级3.1.1至3.1.4报错The operation was rejected by your operating system.
hanchengmei的博客
03-24 326
升级步骤： 1.npm i -g @tarojs/cli@3.1.4 报错如下 解决： cmd用管理员身份运行 2、进入项目：taro update project 3、安装：因为项目中用到的ui框架是内部自研的，安装需要先切换到自己的源： ①npm set registry 源地址 ②npm i ③切回官方源： npm config set registry https://registry.npmjs.org 安装过程中遇到的报错：cant’t read property ‘length’ of un
taro+NutUI
qq_62237888的博客
10-25 572
Tora+NutUI
vue3+taro+nutui+pina小程序空白框架
03-25
结合以上技术，"vue3+taro+nutui+pina小程序空白框架"可以理解为一个基础的开发环境，用于快速搭建微信小程序项目。使用Vue3作为基础框架，Taro负责跨平台编译，NutUI提供UI组件，而Pina则作为状态管理工具。这样的...
Taro+NutUI+Vue3+TypeScript自定义Tabbar
qq_34111842的博客
11-28 2072
在src -> components根目录下新建一个custom-tab-bar文件夹，新建一个customTabBar.vue。在不同的tab页面通过current去控制当前第几个页面的索引。即可在微信开发者工具看到效果。
工地监控小程序-taro、taroui
01-08
基于taro，taro-ui开发的工地监控小程序
TaroUI一款基于Taro框架开发的多端UI组件库
08-10
Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
Taro+NutUI+vue3+TypeScript - 图片上传
qq_34111842的博客
12-08 1547
Taro+Vue3+TypeScript实现手机相册图片上传功能。
Taro框架下 nutui小demo
RetreatLock的博客
04-15 2534
基于nutui+vue3 ，taro小demo
NUTUI 启动报错 resource busy or locked, lstat ‘C:\hiberfil.sys‘
qq_41806718的博客
01-07 2549
These dependencies were not found: @nutui/nutui in ./src/main.js @nutui/nutui/dist/nutui.css in ./src/main.js To install them, you can run: npm install --save @nutui/nutui @nutui/nutui/dist/nutui.css Error from chokidar (C:): Error: EBUSY: resource busy
Taro vue3版本安装使用 NutUi 手动安装
业余前端的职业经历
06-28 3486
最近使用Taro 开发小程序的时候 发现react版本对应的taro-ui竟然好久都没有更新了 奇怪了。 要是后期碰见什么坑 都没人来管了 . 我看见有个网友留言。taro开发的人员把人力都投入到了 Nutui里面了.后来我就去瞅了瞅这个nutui ui框架 感觉 很不错,也有人在不停的维护,这个才是我最想要的情况说句实话呢。如果是跨平台的开发的话 taro 的普及率 并没有uniapp大. 毕竟uniapp是背靠vue这座大山,国内前端开发 vue开发也占据了四分之三的情况我想这个也是为啥 在Taro3.
修改NutUI中TextInput 文本框的
weixin_40425415的博客
03-24 2078
先通过F12检查控制input框样式类 再打开 node_modules ——》@nutui——》nutui.css文件，然后通过Ctrl+F搜索该css文件中是否存在上图中控制的类.nut-textinput 然后在自己编写的网页中添加一个外框，并设置一个类名来指定对应要修改的样式，并结合scoped和>>>符号进行穿透，覆盖默认的样式。 html: <...
Taro+nutui 打包微信小程序 Cannot read property 'setupContext' of null 怎么解决
06-08
这个错误通常是因为在使用 Taro 和 NutUI 进行微信小程序开发时，没有正确地导入 NutUI 的样式文件所导致的。你可以尝试以下解决方法： 1. 在 app.wxss 文件中导入 NutUI 样式文件。在 app.wxss 文件中添加以下代码： ``` @import "path/to/nutui.wxss"; ``` 其中，"path/to/nutui.wxss" 是 NutUI 样式文件的相对路径。 2. 确保 NutUI 的样式文件已经正确安装。使用以下命令安装 NutUI： ``` npm install nutui --save ``` 3. 如果以上两种方法都不能解决问题，可以尝试在 Taro 的配置文件中添加以下代码： ``` plugins: [ // ... ['@tarojs/plugin-css', { postcss: { options: { plugins: [ require('postcss-import')(), require('postcss-url')(), require('postcss-nested')(), require('postcss-cssnext')(), require('nutui/postcss')() // 添加这一行 ] } } }] ] ``` 以上是几种常见的解决方法，希望能够帮到你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值