taro小程序中如何引入css_moudle?配置后不生效的解决方法

news2024/9/27 9:29:48

1.根据文档Taro配置

编译配置存放于项目根目录下的 config 目录中,包含三个文件:

  • index.js 是通用配置
  • dev.js 是项目预览时的配置
  • prod.js 是项目打包时的配置
    参考Taro官网,我们要做的是:找到项目根文件夹下的 config 文件,找到其中的 index.js 配置文件,把 cssModulesenable 改为 true,如图所示:

config/index.js文件

2. 配置完,小程序样式仍然不生效?

taro官网没有写更多的内容,网上查找了一番,找到了方法。
通关之道:
按步骤来:

  1. 改配置文件,即标题1中所述。
  2. 给样式文件 less/scss/css 加前缀:.module,如原来是:index.less,要改为index.module.less

代码结构:
代码结构

  1. index.js中的引入路径:
import styles from './index.module.less';
{/* qingyingStyle是起的类名 */}
<View className={styles.qingyingStyle}>
   <View className="qingyingStyle__main">
   	{/* 具体实现 */}
    <View className="qingyingStyle__main__header">
    	我是头部
    </View>
   </View>
 </View>
  1. 还没改完,还需要给样式文件添加 :global,如:
.qingyingStyle {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  :global {
    .qingyingStyle__main {
    	&__header{
    		color:red;
		}
    }
  }
}

好了,重新编译运行,OK啦!
检查Element是这样的:
检查Element是这样的
已经给类名加了5位数的哈希字符了,搞定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/497028.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Android车载系列】第12章 车载渲染-SurfaceFlinger单独绘制到界面

1 SurfaceFlinger渲染方案 车载的倒车影像同学们知道是怎么实现的吗&#xff1f;等待Android设备开机再打开倒车影像App&#xff1f;车子挂到R档倒车如果等待这个流程实在太久&#xff0c;是否还有其它办法可以让车子挂R档直接展示倒车影像呢&#xff1f;大家思考一下。 我们从…

opencv_c++学习(四)

图像在opencv中的存储方式 在上图中可以看出&#xff0c;在opencv中采用的是像素值来代表每一个像素三通道颜色的深浅。 Mat对象 Mat对象是在OpenCV2.0之后引进的图像数据结构、自动分配内存、不存在内存泄漏的问题&#xff0c;是面向对象的数据结构。分了两个部分&#xff0…

Graph—随机游走

Random Walk Approaches for Node Embeddings 一、随机游走基本概念 想象一个醉汉在图中随机的行走&#xff0c;其中走过的节点路径就是一个随机游走序列。 随机行走可以采取不同的策略&#xff0c;如行走的方向、每次行走的长度等。 二、图机器学习与NLP的关系 从图与NLP的…

《计算机网络—自顶向下方法》 第二章Wireshark实验:HTTP协议分析

HTTP 协议工作于客户端-服务端架构上。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。 WEB 服务器有&#xff1a;Apache服务器&#xff0c;IIS服务器&#xff08;Internet Information Services&#xff09;等。URL&#xff1a;即统一资源定位符(…

手写自己的Springboot-1-整合tomcat

文章目录 创建自己的Springboot创建项目注册、启动Spring容器启动tomcat 引用测试 创建自己的Springboot 首先明确本文章想要达到的目的,就是引入我们自己写的Springboot项目的依赖,无需配置,就可以达到处理普通请求的效果. 这里有一个非常简单的Springboot项目,项目里面就只…

将 Segment Anything 扩展到医学图像领域

文章目录 前言技术交流SAM 拆解分析从医学角度理解 SAM 的效用MedSAM实验总结 前言 SAM 是一种在自然图像分割方面取得成功的模型&#xff0c;但在医学图像分割方面表现不佳。MedSAM 首次尝试将 SAM 的成功扩展到医学图像&#xff0c;并成为用于分割各种医学图像的通用工具。为…

22.网络爬虫—APP数据抓取详讲

网络爬虫—APP数据抓取详讲 Fiddler工作原理安装完成Fiddler后的配置前提条件工具配置 手机数据抓取Fiddler手机端配置手机端操作 实战演示后记 前言&#xff1a; &#x1f3d8;️&#x1f3d8;️个人简介&#xff1a;以山河作礼。 &#x1f396;️&#x1f396;️:Python领域新…

springboot+mybatis搭建maven多模块工程

最近看了一篇博客&#xff0c;选定springbootmybatis作为框架&#xff0c;在idea中搭建maven的多模块工程&#xff0c;下面也再温习一下&#xff0c;并将搭建过程分享出来&#xff0c;供小伙伴们参考。 1、开发工具及系统环境 Idea 2020.3系统环境为win10mysql5.7springboot2.…

GNN学习/GCN学习/GNN环境配置cuda安装/GCN代码展示

参考: A Gentle Introduction to Graph Neural Networks https://distill.pub/2021/gnn-intro/Understanding Convolutions on Graphs https://distill.pub/2021/understanding-gnns/Graph neural networks: A review of methods and applications https://arxiv.org/pdf/1812…

【Java】认识异常

目录 1.异常概念和分类 2.异常的抛出 3.异常的捕获 3.1异常声明throws 3.2异常捕获try-catch 3.3finally 3.4.异常的处理流程 4.自定义异常类 1.异常概念和分类 public class Test {public static void test() {test();}public static void main(String[] args) {Sy…

详解数据集safety-pilot-model-deployment-data

safety-pilot-model-deployment-data这个数据集是由美国交通部的联邦航空管理局&#xff08;FAA&#xff09;和交通运输部&#xff08;DOT&#xff09;主导的“安全试点”&#xff08;Safety Pilot Model Deployment&#xff09;项目所提供的。该项目旨在研究汽车与飞机之间的通…

Vue电商项目--开发Search模块与mockjs模拟数据

Search模块中商品分类与过度动画 现在完成了在/home路由下实现三级导航组件的显示隐藏 通过this.$route.path!/home在搜索页面显示&#xff0c;通过方法鼠标移入移出从而又控制在search路由下的显示隐藏 过渡动画&#xff1a;前提组件|元素必要又v-if| v-show指令才可以进行…

Linux进程状态及优先级

本文已收录至《Linux知识与编程》专栏&#xff01; 作者&#xff1a;ARMCSKGT 演示环境&#xff1a;CentOS 7 进程状态及优先级 前言正文进程状态就绪运行状态R阻塞睡眠状态 S休眠状态D挂起 暂停状态T前台与后台进程待追踪暂停状态t 死亡状态 X僵尸状态 Z 孤儿进程进程优先级查…

nginx(七十三)nginx与Location响应头细节探讨

一 nginx与Location响应头细节探讨 ① 重定向和Location回顾 多种重定向跳转方式的差异 nginx之absolute_redirect、server_name_in_redirect、port_in_redirect 共同控制Location响应头 ② STS响应头导致307重定向 "第一次访问 http://www.baidu.com" 观察…

基于Qt、C++的毕业设计课设数学绘图工具(平面图、图表、立体图绘制-附下载链接)

基于Qt、C的毕业设计课设数学绘图工具&#xff08;平面图、图表、立体图绘制&#xff09; 介绍 这是我的毕业设计&#xff0c;基于Qt Creator 4.11.1&#xff0c;c语言。 效果图如下 点我下载项目源码&#xff08;含打包软件&#xff09; 使用说明 1. 二维函数绘制 开始界面…

python 系列 07 - 基于easyocr的ocr识别

OCR,光学文字识别&#xff0c;对文本资料进行扫描&#xff0c;然后对图像文件进行分析处理&#xff0c;获取文字及版面信息的过程。本示例通过easyocr库来演示。easyocr是一个比较流行的库&#xff0c;支持超过80种语言。安装的时候注意会附带安装torch库&#xff08;一个深度学…

将ROS1和ROS2安装到同一个ubuntu系统中,ROS2安装??????????????

1. 本文测试环境: ubuntu:20.04,虚拟机 ROS1:noetic ROS2:foxy 2. 先说结论 ROS1 与 ROS2 共存,需要考虑三个问题: 1) 不同Ubuntu版本,有不同版本的ROS1和ROS2推荐,尽量不要任性地乱装; 2)ROS1和ROS2安装过程中,是否会出现文件“删改”的问题?目前使用下来,并…

拓扑排序详解(包含算法原理图解、算法实现过程详解、算法例题变式全面讲解等)

前置知识 有向无环图 在图论中&#xff0c;如果一个有向图无法从某个顶点出发经过若干条边回到该点&#xff0c;则这个图是一个有向无环图&#xff08;DAG图&#xff09;。 如图所示。 入度 对于一个有向图&#xff0c;若x点指向y点&#xff0c;则称x点为y点的入度。 出度…

Redis --- 多级缓存

一、什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a; 请求要经过Tomcat处理&#xff0c;Tomcat的性能成为整个系统的瓶颈Redis缓存失效时&#xff…

python每日一练:硬币划分(多方法详解)

文章目录 前言0、题目一、暴力总是不能解决问题的二、还能更暴力一点三、减少暴力思想四、引入先进思想总结 前言 这题挺有意思的&#xff0c;典型的背包组合问题&#xff0c;虽然没有要求各种组合方式&#xff0c;不过我们可以试试给出组合方式。当然这题不太可能用一行代码解…