taro小程序中如何引入css_moudle？配置后不生效的解决方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro小程序中如何引入css_moudle？配置后不生效的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.根据文档Taro配置

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

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

taro 引入样式,前端,小程序,taro,小程序,css,前端

2. 配置完，小程序样式仍然不生效？

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

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

代码结构：
taro 引入样式,前端,小程序,taro,小程序,css,前端

改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>

还没改完，还需要给样式文件添加 :global，如：

.qingyingStyle {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  :global {
    .qingyingStyle__main {
    	&__header{
    		color:red;
		}
    }
  }
}

好了，重新编译运行，OK啦！
检查Element是这样的：
taro 引入样式,前端,小程序,taro,小程序,css,前端
已经给类名加了5位数的哈希字符了，搞定。

扩展知识：

在小程序开发中，有几种常用的开发框架可供选择。以下是一些流行的小程序开发框架：

Taro: Taro 是一个多端统一开发框架，可以同时开发小程序、H5、React Native 等多个平台的应用。它支持使用 React、Vue 和原生 JavaScript 进行开发，并提供了一致的组件和 API 接口，方便开发者跨平台开发。
微信原生小程序开发框架: 微信原生小程序开发框架基于原生 JavaScript 进行开发，使用微信小程序提供的组件和 API 接口进行开发。这种开发方式比较轻量简单，适合对框架要求不高的小程序项目。
mpVue: mpVue 是一个基于 Vue.js 的小程序开发框架，它可以让开发者使用 Vue.js 的语法和开发方式进行小程序开发。mpVue 将 Vue.js 的组件和生命周期与小程序的组件和生命周期进行了适配，提供了一种类似 Vue.js 的开发体验。
WePY: WePY 是一个类似于 Vue.js 的小程序开发框架，它使用类似于 Vue.js 的语法和开发方式进行小程序开发。WePY 提供了一套组件化、模块化和工程化的开发模式，使得开发小程序更加高效和可维护。
UniApp: UniApp 是一个基于 Vue.js 的跨平台应用开发框架，可以通过编写一套代码，同时构建和发布多个平台的应用程序，包括微信小程序、H5、iOS、Android 等。UniApp 的设计理念是“一次开发，多端运行”，适用于构建中小型应用程序。虽然 UniApp 提供了跨平台开发的能力，但在使用过程中，由于不同平台的差异性，一些平台特有的功能和样式可能需要进行定制和适配。因此，在开发时需要考虑各平台的差异，并根据需要进行相应的调整和优化。