当前位置：首页 > article >正文

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

article 2024/9/20 18:53:55

1.根据文档Taro配置

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

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

config/index.js文件

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

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

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

代码结构：

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